Editorial · @csdr/editorial

StatTile

Headline numbers with unit, delta and source. Use for 2–4 key figures, never as a dashboard.

Import: import { StatRow, StatTile } from '@csdr/editorial'
Use on: reports · landing

When to use

Two to four headline numbers at the top of a report or section. Each tile names its period and source; deltas use trend and tone so meaning is not colour-alone.

Three tiles

Monthly mean, July 2026

429.12ppm

NOAA GML

Annual mean, 2025

427.35ppm

+111.4 ppm since 1959

Growth rate, 2025

2.23ppm/yr

± 0.11

Code

<StatRow columns={3}>
  <StatTile label="Monthly mean, July 2026" value="429.12" unit="ppm" source="NOAA GML" />
  <StatTile label="Annual mean, 2025" value="427.35" unit="ppm" delta="+111.4 ppm since 1959" trend="up" tone="bad" />
  <StatTile label="Growth rate, 2025" value="2.23" unit="ppm/yr" delta="± 0.11" />
</StatRow>