- 分组
- 开场 · 产品或方案第 1 页
- 组件
AgencyHero·#agency-hero
适合
- 产品官网式的开场
- 营销方案、增长提案的封面
不适合
- 正式汇报:用 Cover
- 要放大数字:用 NumberOpener
内容上限
| 1 | lines 2–3 行,每行 ≤ 7 字(或 12 个字母),最多 2 行带 icon |
| 2 | badge ≤ 24 字;tag ≤ 16 字 |
| 3 | lead ≤ 64 字 |
| 4 | actions 1–2 个,每个 ≤ 10 个字符 |
| 5 | names 0–6 个,只写文字;namesLabel ≤ 16 字 |
字段
| 字段 | 类型 | |
|---|---|---|
badge · 必填 | string | 顶部荧光绿徽章 |
lines · 必填 | { text, icon? }[] | 大标题各行 |
tag · 必填 | string | 左下黑色胶囊 |
lead · 必填 | string | 右下导语 |
actions · 必填 | string[] | 胶囊按钮文字,第一个实心 |
names | string[] | 底部名称 |
namesLabel | string | 名称上方小字 |
source | string | 事实出处 |
示例代码
<AgencyHero badge="开源 · MIT 协议" lines={[{ text: '让 AI 做的', icon: 'magic' }, { text: '幻灯片' }]} tag="HTML 演示引擎" lead="…" actions={['开始使用', 'GitHub']} />