# KPI tile

A headline number with its label, change against the previous period and an optional sparkline: Revenue £48,620, Paid orders 41, AOV £1,186. Multi-currency tiles split the total by currency.

- **Group:** Data display · **family:** `data-display` · **shadcn:** Card
- **Build:** `Card`; sparkline via shadcn `chart` (Recharts).
- **In apps/admin today:** Card exists.
- **Client component:** no. 

## Content rules

- Numbers agree across the page (stages sum to paid orders).

## Do

- Say the comparison period.

## Don't

- Colour the value itself.

## Accessibility

- **Keyboard:** Tile may be a link to the report.
- **ARIA:** Delta spelled out for AT ("up 12 percent").
- **Focus:** Ring if linked.

## Tokens

`--w-semibold` `--text-kpi` `--font-voice` `--font-stretch-title` `--tr-page` `--s-4` `--s-2` `--s-3` `--card` `--border` `--r-card` `--e-1` `--motion-hover` `--motion-focus` `--secondary-border` `--muted` `--ring` `--focus-ring` `--w-medium` `--text-small` `--font-ui` `--muted-foreground` `--foreground` `--text-body` `--s-1` `--r-chip` `--success` `--status-soft-alpha` `--destructive` `--neutral` `--chart-muted` `--chart-1` `--text-22`

## Files

`kpi-tile.html` live specimen · `kpi-tile.css` kit rules · `kpi-tile.d.ts` props · full page: `docs/components/kpi-tile/` (phone: `m/`).