Framed numbers <FramedStats />
A row of number boxes with thick black borders and hard shadows, each with a theme-coloured dot in the top-right corner. Designed for the block frame style; other styles work too.
- Group
- Data · 3–4 number boxes with heavy borders
- Component
FramedStats·#framed-stats
Good for
- 3–4 key numbers side by side
- An overview of the size of an event, a product or a project
Avoid when
- The numbers need explanation: use KpiBoard
- There is only one number: use BigStat
Content limits
| 1 | stats 3–4 |
| 2 | value ≤ 6 characters |
| 3 | label ≤ 12 chars |
| 4 | slide title ≤ 22 chars |
| 5 | numbers need a source |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | Section label |
title · required | string | string[] | Title |
lead | string | Lead |
stats · required | { value, label }[] | Numbers |
source | string | Source |
Example
<FramedStats
kicker="一眼看全"
title="这个引擎里有什么"
stats={[{ value: '251', label: '个模板' }, …]}
source="…"
/>