- 分组
- 开场 · 工具或平台发布
- 组件
HeroPanel·#hero-panel
适合
- 软件、平台、设计系统发布
- 有一张能代表产品的真实截图
不适合
- 没有真实截图:用 HangingCover
- 奖章内容无法引用出处:去掉 laurels
内容上限
| 1 | title ≤ 2 行 × 10 字 |
| 2 | lead ≤ 40 字 |
| 3 | pills 1–2 个 |
| 4 | src 必须是真实截图 |
| 5 | laurels 0–3 个:title ≤ 10 字,sub ≤ 14 字,要有出处 |
字段
| 字段 | 类型 | |
|---|---|---|
tag | { label, text } | 小标签 |
title · 必填 | string | string[] | 标题 |
lead · 必填 | string | 导语 |
pills | string[] | 胶囊 |
src · 必填 | string | 截图 |
alt · 必填 | string | 截图说明 |
laurels | { title, sub? }[] | 奖章 |
source | string | 出处 |
示例代码
<HeroPanel
tag={{ label: '第 1 期', text: '工作室风格' }}
title={['做演示,', '像搭积木']}
lead="…"
src={kit}
alt="组件库首页截图"
laurels={[{ title: '67 个模板', sub: '全部带内容上限' }]}
/>