扇形截图封面 <FanCover />
整页饱和蓝(配 tone: accent),居中胶囊徽标、紧凑大标题和导语,两个带圆形箭头的胶囊按钮,底边升起一排扇形倾斜的截图卡。
版型與風格的說明目前僅提供簡體中文。
- 分組
- 开场 · 产品官网式第 1 页
- 元件
FanCover·#fan-cover
適合
- 产品、工具、开源项目的封面
- 有 3–5 张真实截图可以展示
不適合
- 没有真实截图:用 OrbCover 或 Cover
- 正式汇报:用 Cover
內容上限
| 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 使用 |
欄位
| 欄位 | 型別 | |
|---|---|---|
badge · 必填 | { icons, text } | 标题上方的胶囊徽标 |
title · 必填 | string | string[] | 标题;数组手动断行 |
lead · 必填 | string | 一句导语 |
actions · 必填 | string[] | 胶囊按钮文字,第一个为白底实心 |
cards · 必填 | { src, alt }[] | import 进来的截图 |
source | string | 事实出处 |
範例程式碼
<FanCover badge={{ icons: ['code', 'stars'], text: '开源 · MIT 许可' }} title={['让 AI 做的演示,', '每一页都整齐']} lead="…" actions={['npx slidehtml init my-talk', 'GitHub 源码']} cards={[{ src: shot, alt: '…' }, …]} />