扇形截图封面 <FanCover />
整页饱和蓝(配 tone: accent),居中胶囊徽标、紧凑大标题和导语,两个带圆形箭头的胶囊按钮,底边升起一排扇形倾斜的截图卡。
Template and style descriptions are currently available in Chinese only.
- Group
- 开场 · 产品官网式第 1 页
- Component
FanCover·#fan-cover
Good for
- 产品、工具、开源项目的封面
- 有 3–5 张真实截图可以展示
Avoid when
- 没有真实截图:用 OrbCover 或 Cover
- 正式汇报:用 Cover
Content limits
| 1 | badge.text ≤ 20 字,icons 1–3 个 |
| 2 | title 1–2 行 × 12 字 |
| 3 | lead ≤ 40 字 |
| 4 | actions 1–2 个,每个 ≤ 28 个字符 |
| 5 | cards 3–5 张真实截图,宽高比约 16:10 |
| 6 | 配 tone: accent 使用 |
Fields
| Field | Type | |
|---|---|---|
badge · required | { icons, text } | 标题上方的胶囊徽标 |
title · required | string | string[] | 标题;数组手动断行 |
lead · required | string | 一句导语 |
actions · required | string[] | 胶囊按钮文字,第一个为白底实心 |
cards · required | { src, alt }[] | import 进来的截图 |
source | string | 事实出处 |
Example
<FanCover badge={{ icons: ['code', 'stars'], text: '开源 · MIT 许可' }} title={['让 AI 做的演示,', '每一页都整齐']} lead="…" actions={['npx slidehtml init my-talk', 'GitHub 源码']} cards={[{ src: shot, alt: '…' }, …]} />