特性列表 FeatureList

概览

FeatureList 用于以整洁的网格形式展示产品的一系列核心优势或技术特性。

实时预览

核心优势

为什么选择 Mewx CMS UI？

零配置接入

基于 Tailwind 预设，一行代码即可完成样式配置。

类型安全

全量 TypeScript 支持，内置 Zod 校验规则。

性能极致

轻量级运行时，支持 Next.js 服务端渲染优化。

使用方法

import { FeatureList } from '@goenhance/cms-ui';

const Example = () => (
  <FeatureList
    subtitle="核心特性"
    title="卓越的开发体验"
    list={[
      { title: "...", description: "...", icon: "..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	主标题
subtitle	string	-	顶部小字副标题
list	FeatureListItem[]	[]	特性列表项

FeatureListItem

属性	类型	说明
title	string	特性标题
description	string	特性描述文本
icon	string	图标 URL (建议使用 SVG)

特性

• 动态网格：自动根据屏幕宽度在 1、2、3 列之间切换。
• 悬停特效：内置边框高亮和阴影提升动画，增加交互质感。
• 主题适配：图标背景色自动引用品牌主色的浅色变体 (--blocks-primary-lightest)。