悬挂图标封面 <HangingCover />
居中大标题,彩色图标方块用细线从顶部吊下来,缓慢摆动;标题里一个词用强调色,下面是导语和 1–3 个胶囊。
版型與風格的說明目前僅提供簡體中文。
- 分組
- 开场 · 产品发布第 1 页
- 元件
HangingCover·#hanging-cover
適合
- 产品、平台、工具的发布或介绍
- 想要轻松、干净、有产品感的开场
不適合
- 严肃的研究或政策汇报:用 Cover
- 没有合适的图标:图标只是装饰,不要硬凑
內容上限
| 1 | title ≤ 2 行 × 12 字 |
| 2 | mark 必须是 title 里原样出现的子串 |
| 3 | lead ≤ 50 字 |
| 4 | icons 4–8 个,只用 icon-set 里的名称 |
| 5 | pills 1–3 个,写事实(页数、日期),不要假按钮 |
欄位
| 欄位 | 型別 | |
|---|---|---|
tag | { label, text } | 标题上方的小标签 |
title · 必填 | string | string[] | 标题 |
mark | string | 用强调色的词 |
lead · 必填 | string | 导语 |
icons · 必填 | IconName[] | 悬挂的图标,4–8 个 |
pills | string[] | 胶囊 |
範例程式碼
<HangingCover
tag={{ label: '第 1 期', text: '风格引擎与面板模板' }}
title={['同一份内容,', '换一种气质']}
mark="气质"
lead="风格只管外观,内容和上限都不动。"
icons={['tuning', 'layers', 'chart', 'presentation']}
pills={['13 页', '2026 年 10 月']}
/>