← 全部模板

案例卡 <CaseStudy />

左边一张大圆角主图,右边标题、标签、一段简介,底部三个指标卡逐个出现。

在示例演示里查看 →

分组
证据 · 一个案例三个数
组件
CaseStudy · #case-study
交互
build:指标逐个出现

适合

  • 介绍一个具体案例、地点、项目,并给出三个关键数
  • 客户案例(主图用真实截图)

不适合

  • 只有一个数:用 BigStat
  • 多个案例并列:用 WorkCards

内容上限

1title ≤ 2 行 × 10 字
2tags 0–4 个,每个 ≤ 6 字
3body ≤ 70 字
4metrics 正好 3 个:value ≤ 7 个字符,label ≤ 12 字

字段

字段类型
image · 必填{ src, alt, credit?, focus? }主图
kicker · 必填string小节名
title · 必填string | string[]标题
tagsstring[]标签
body · 必填string简介
metrics · 必填{ value, label }[]三个指标,每个一个 build 步骤
sourcestring事实出处

示例代码

<CaseStudy image={{ src: aerial, alt: '…' }} kicker="案例" title="…" tags={['世界遗产']} body="…" metrics={[{ value: '34.8万', label: '平方公里面积' }, …]} />