← All templates

悬挂图标封面 <HangingCover />

居中大标题,彩色图标方块用细线从顶部吊下来,缓慢摆动;标题里一个词用强调色,下面是导语和 1–3 个胶囊。

Template and style descriptions are currently available in Chinese only.

Group
开场 · 产品发布第 1 页
Component
HangingCover · #hanging-cover

Good for

  • 产品、平台、工具的发布或介绍
  • 想要轻松、干净、有产品感的开场

Avoid when

  • 严肃的研究或政策汇报:用 Cover
  • 没有合适的图标:图标只是装饰,不要硬凑

Content limits

1title ≤ 2 行 × 12 字
2mark 必须是 title 里原样出现的子串
3lead ≤ 50 字
4icons 4–8 个,只用 icon-set 里的名称
5pills 1–3 个,写事实(页数、日期),不要假按钮

Fields

FieldType
tag{ label, text }标题上方的小标签
title · requiredstring | string[]标题
markstring用强调色的词
lead · requiredstring导语
icons · requiredIconName[]悬挂的图标,4–8 个
pillsstring[]胶囊

Example

<HangingCover
  tag={{ label: '第 1 期', text: '风格引擎与面板模板' }}
  title={['同一份内容,', '换一种气质']}
  mark="气质"
  lead="风格只管外观,内容和上限都不动。"
  icons={['tuning', 'layers', 'chart', 'presentation']}
  pills={['13 页', '2026 年 10 月']}
/>