案例卡 <CaseStudy />
左边一张大圆角主图，右边标题、标签、一段简介，底部三个指标卡逐个出现。
Template and style descriptions are currently available in Chinese only.
- Group
- 证据 · 一个案例三个数
- Component
CaseStudy·#case-study- Interaction
- build：指标逐个出现
Good for
- 介绍一个具体案例、地点、项目，并给出三个关键数
- 客户案例（主图用真实截图）
Avoid when
- 只有一个数：用 BigStat
- 多个案例并列：用 WorkCards
Content limits
| 1 | title ≤ 2 行 × 10 字 |
| 2 | tags 0–4 个，每个 ≤ 6 字 |
| 3 | body ≤ 70 字 |
| 4 | metrics 正好 3 个：value ≤ 7 个字符，label ≤ 12 字 |
Fields
| Field | Type | |
|---|---|---|
image · required | { src, alt, credit?, focus? } | 主图 |
kicker · required | string | 小节名 |
title · required | string | string[] | 标题 |
tags | string[] | 标签 |
body · required | string | 简介 |
metrics · required | { value, label }[] | 三个指标，每个一个 build 步骤 |
source | string | 事实出处 |
Example
<CaseStudy image={{ src: aerial, alt: '…' }} kicker="案例" title="…" tags={['世界遗产']} body="…" metrics={[{ value: '34.8万', label: '平方公里面积' }, …]} />