徽标首屏 <BadgeHero />
居中的胶囊徽标（小节名 + 一句状态）、大标题、导语和 1–2 个画出来的按钮；一张宽图装在窗口里，从页面底边升起。
Template and style descriptions are currently available in Chinese only.
- Group
- 开场 · 官网式首屏
- Component
BadgeHero·#badge-hero
Good for
- 介绍一个产品、项目或发行版的开场
- 有一张宽幅装饰插图或真实截图可放
Avoid when
- 没有图：用 Cover 或 Statement
- 按钮只是装饰，现场不能点；需要真实链接时写进 note 或结尾页
Content limits
| 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 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 徽标里的强调色小标签 |
title · required | string | string[] | 大标题 |
badge | string | 徽标里的说明文字 |
lead | string | 一句话导语 |
actions | { label, kind?: 'primary' | 'ghost' | 'code', icon? }[] | 画出来的按钮 |
note | string | 按钮下的等宽小字 |
image · required | { src, alt, credit?, focus? } | import 的 decor- 插图或真实截图 |
Example
<BadgeHero kicker="介绍" badge="当前稳定版 · Fedora Linux 44" title="认识 Fedora Linux" lead="…" actions={[{ label: '从这里开始' }, { label: 'fedoraproject.org', kind: 'ghost' }]} image={{ src: hero, alt: '…', credit: '插图：AI 生成（装饰）' }} />