← All templates

图标卡片 <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

1items 正好 6 或 8 个
2title ≤ 8 字;body 18–40 字,各卡长度尽量接近
3tag ≤ 12 个字符;没有就省略,不要编
4图标按含义挑,同一页不要重复

Fields

FieldType
kicker · requiredstring标题上方的小节名,2–8 字
title · requiredstring | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <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 实战(行业观察)"
/>