← 所有版型

案例卡 <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: '平方公里面积' }, …]} />