KPI tile
Tinted stat tile for one headline number + label.
Preview
Jobs today
14
Jobs today
<div class="nx-kpi"><div class="nx-kpi__num">14</div><div class="nx-kpi__lbl">Jobs today</div></div><NxKpiTile value="14" label="Jobs today" />API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
value | ReactNode | — | Required | The headline number/value. |
label | ReactNode | — | Required | The supporting label under the number. |
Classes
| Class | Description |
|---|---|
.nx-kpi | Tile: accent-50 bg, 12px radius |
.nx-kpi__num | 1.7rem/780, accent-700, -0.03em tracking |
.nx-kpi__lbl | .78rem, slate-500 |
Accessibility
- Numbers use tabular figures via the type scale; pair the tile with a text label — never colour/number alone to convey trend (use Badge/Alert for delta + direction).
Do / Don’t
- Do: Keep the number short (fits one line).Don’t: Don't stack more than 3 KPI tiles per row on mobile.