发光大数字 <GlowMetric />
左边标题和导语,右边一个衬线斜体的超大数字浮在暖色光晕上,下方细线分隔的一行三个辅助数字。暖夜风格的招牌数据页。
Template and style descriptions are currently available in Chinese only.
- Group
- 数据 · 一个核心数字加三个旁证
- Component
GlowMetric·#glow-metric
Good for
- 有一个最想让人记住的数字
- 还有 3 个支撑它的数字
Avoid when
- 数字要对比:用 CountCompare
- 没有旁证:用 BigStat
Content limits
| 1 | title ≤ 2 行 × 8 字 |
| 2 | lead ≤ 50 字 |
| 3 | figure ≤ 5 个字符,unit ≤ 4 个字符 |
| 4 | caption ≤ 30 字 |
| 5 | subs 正好 3 个:value ≤ 8 个字符,label ≤ 16 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
title · required | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
figure · required | string | 大数字 |
unit | string | 单位 |
caption · required | string | 数字在数什么 |
subs · required | { value, label }[] | 底部三个辅助数字 |
Example
<GlowMetric kicker="交付物" title={['整份演示,', '只有一个文件']} figure="6.1" unit="MB" caption="单文件构建的大小" subs={[{ value: '3.6 MB', label: '其中是内嵌字体' }, …]} />