案例卡 <CaseCard />
一张白色大圆角卡片：左边衬线标题、一段说明和底部灰色小标签；右边一张真实截图，截图下方一条深色跑马灯，写着项目关键词。
Template and style descriptions are currently available in Chinese only.
- Group
- 证据 · 一个项目或功能配一张真实截图
- Component
CaseCard·#case-card
Good for
- 用一张真实截图展示一个功能、项目或成果
- 作品集、案例研究
Avoid when
- 截图需要标注细节：用 Screenshot
- 多个视图切换：用 TabbedShot
- 没有真实截图
Content limits
| 1 | title ≤ 3 行 × 9 字 |
| 2 | lead ≤ 70 字 |
| 3 | tags 2–3 个，各 ≤ 10 字 |
| 4 | ticker 2–3 个，各 ≤ 14 个字符 |
| 5 | image 必须是真实截图 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名，2–8 字 |
title · required | string | string[] | 标题；数组手动断行 |
lead | string | 一段说明 |
source | string | 事实出处 |
image · required | string | import 的真实截图 |
alt · required | string | 截图说明 |
tags · required | string[] | 灰色小标签 |
ticker · required | string[] | 跑马灯关键词 |
Example
<CaseCard kicker="模板库" title={['124 个模板，', '先看再选']} lead="…" image={shotKit} alt="组件库页面截图" tags={['#/kit', '19 种风格']} ticker={['TEMPLATES', 'STYLES']} />