图标卡片 <IconGrid />
3 × 2 或 4 × 2 的图标卡片,每张有图标、标题、说明和右上角标签。悬停时卡片抬起、图标点亮。
Template and style descriptions are currently available in Chinese only.
- Group
- 并列 · 6–8 个对象
- Component
IconGrid·#icon-grid- Interaction
- 悬停卡片:抬起 6u,阴影加深,图标格换成强调底色。
Good for
- 6 或 8 个并列对象:平台、产品、角色、地区
- 每个对象一两句话就能说清
Avoid when
- 3–4 个对象:用 NumberedColumns,每项能写得更充分
- 对象之间要比较数值:用 MetricBars 或 Matrix
Content limits
| 1 | items 正好 6 或 8 个 |
| 2 | title ≤ 8 字;body 18–40 字,各卡长度尽量接近 |
| 3 | tag ≤ 12 个字符;没有就省略,不要编 |
| 4 | 图标按含义挑,同一页不要重复 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名,2–8 字 |
title · required | string | string[] | 页面标题;传数组可手动断行,每项一行 |
lead | string | 一到两句导语,≤ 60 字 |
source | string | 事实出处;页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示,可用 <kbd> |
items · required | { icon, title, body, tag? }[] | 卡片 |
Example
<IconGrid
kicker="国内平台"
title="每个助手,偏爱自家生态"
items={[
{ icon: 'video', title: '小禾', tag: '禾流集团', body: '偏向禾流号、禾视频和禾百科。' },
{ icon: 'chat', title: '青柚', tag: '柚子集团', body: '偏向柚子号和柚子新闻。' },
// …共 6 或 8 个
]}
source="示例知识库 · 国内 GEO 实战(行业观察)"
/>