照片封面 <PhotoCover />
一张图铺满整页,暗角加左下渐变压暗,白色大标题、副题和一行元信息放在左下。图片缓慢推近。
Template and style descriptions are currently available in Chinese only.
- Group
- 开场 · 用一张图定调
- Component
PhotoCover·#photo-cover
Good for
- 有一张能代表主题的氛围图:风景、场景、物件
- 公开演讲、科普、品牌故事的第一页
Avoid when
- 没有合适的图:用 Cover
- 要在封面放数字和关键事实:用 Cover 或 NumberOpener
Content limits
| 1 | title ≤ 2 行 × 10 字 |
| 2 | sub ≤ 40 字 |
| 3 | meta 0–3 项,每项 ≤ 12 字 |
| 4 | image.credit ≤ 20 字 |
| 5 | 必须配 tone: 'dark' |
Fields
| Field | Type | |
|---|---|---|
image · required | { src, alt, credit?, focus? } | import 进来的 decor- 插图或截图;credit 显示在右下 |
kicker · required | string | 小节名 |
title · required | string | string[] | 主标题 |
sub | string | 副题 |
meta | string[] | 底部小字:时长、场合等 |
source | string | 事实出处 |
Example
<PhotoCover image={{ src: reef, alt: '…', credit: '插图:AI 生成(示意)' }} kicker="海洋科普" title={['珊瑚礁:', '海里的城市']} sub="…" meta={['12 分钟']} />