Metric mosaic <MetricMosaic />

A tall accent-coloured bar holding one number on the left, the title block in the middle, 2–3 small number tiles at the top right and one big number at the bottom right. Designed for the fluorescent grid style; other styles work too.

Group: Data · a tall bar, a title block, small number tiles and a big number tile fit into one slide
Component: MetricMosaic · #metric-mosaic

Good for

Explain one set of related numbers on a single slide
A data slide for a launch or a growth review

Avoid when

The numbers have no main and secondary: use KpiBoard
You need a trend: use LineChart

Content limits

1	side value ≤ 7 characters
2	small 2–3: value ≤ 6 characters, label ≤ 14 chars
3	hero value ≤ 6 characters, label ≤ 16 chars
4	title 1–2 lines, ≤ 6 chars per line
5	source is required

Fields

Field	Type
`kicker` · required	`string`	Section label
`title` · required	`string \| string[]`	Title
`lead`	`string`	Lead
`side` · required	`{ value, label }`	Tall bar on the left
`small` · required	`{ value, label }[]`	Small number tiles
`hero` · required	`{ value, label }`	Big number tile
`source`	`string`	Source

Example

<MetricMosaic
  kicker="全球太阳能 · 2025"
  title={['十年，', '约十一倍']}
  side={{ value: '11×', label: '…' }}
  small={[{ value: '8.7%', label: '占全球发电' }]}
  hero={{ value: '2,779', label: '…' }}
  source="…"
/>