- 分组
- 开场 · 官网式首屏
- 组件
BadgeHero·#badge-hero
适合
- 介绍一个产品、项目或发行版的开场
- 有一张宽幅装饰插图或真实截图可放
不适合
- 没有图：用 Cover 或 Statement
- 按钮只是装饰，现场不能点；需要真实链接时写进 note 或结尾页
内容上限
| 1 | kicker ≤ 6 字；badge ≤ 18 字 |
| 2 | title 1 行 ≤ 12 字（最多 2 行） |
| 3 | lead ≤ 60 字 |
| 4 | actions 1–2 个，label ≤ 10 字或 ≤ 18 个拉丁字符 |
| 5 | note ≤ 30 字 |
| 6 | image 宽图，上部是重点（只露出约 290u 高），credit ≤ 20 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 徽标里的强调色小标签 |
title · 必填 | string | string[] | 大标题 |
badge | string | 徽标里的说明文字 |
lead | string | 一句话导语 |
actions | { label, kind?: 'primary' | 'ghost' | 'code', icon? }[] | 画出来的按钮 |
note | string | 按钮下的等宽小字 |
image · 必填 | { src, alt, credit?, focus? } | import 的 decor- 插图或真实截图 |
示例代码
<BadgeHero kicker="介绍" badge="当前稳定版 · Fedora Linux 44" title="认识 Fedora Linux" lead="…" actions={[{ label: '从这里开始' }, { label: 'fedoraproject.org', kind: 'ghost' }]} image={{ src: hero, alt: '…', credit: '插图：AI 生成（装饰）' }} />