半图半文 <PhotoSplit />
一半是贴边的整幅图片（可放左或右），另一半是标题、导语和 0–3 条编号要点，要点逐条出现。
Template and style descriptions are currently available in Chinese only.
- Group
- 讲解 · 一张图配一段说明
- Component
PhotoSplit·#photo-split- Interaction
- build：要点逐条出现
Good for
- 介绍一个对象或概念，图片帮助理解
- 章节里节奏需要一张“透气”的页
Avoid when
- 图片是需要细看的截图：用 Screenshot 或 DeviceFrame
- 要点超过 3 条：拆页或用 NumberedColumns
Content limits
| 1 | title ≤ 3 行 × 9 字 |
| 2 | lead ≤ 60 字 |
| 3 | points 0–3 条：title ≤ 10 字，body ≤ 36 字 |
| 4 | 有 lead 时 points ≤ 3 条，body 都写满时最好 ≤ 2 条 |
Fields
| Field | Type | |
|---|---|---|
image · required | { src, alt, credit?, focus? } | 竖图或方图更合适 |
side | 'left' | 'right' | 图片在哪一边，默认 left |
kicker · required | string | 小节名 |
title · required | string | string[] | 标题 |
lead | string | 导语 |
points | { title, body }[] | 编号要点，每条一个 build 步骤 |
source | string | 事实出处 |
Example
<PhotoSplit image={{ src: coral, alt: '…' }} side="left" kicker="先认识它" title={['珊瑚不是石头，', '是动物']} lead="…" points={[{ title: '水螅体', body: '…' }]} />