Skip to main content

Stat Cards

6 pages

A figure with its trend or its geography, sized for a dashboard row.

KPI stat card with a live area chart sparkline, hover-driven value/label updates, and a tokenized trend badge.

1 example

An elevated chart-in-a-card: a header with a headline KPI + delta + a segmented period control (ToggleGroup), a token-coloured AreaChart, and a footer breakdown legend. The period control re-renders the chart.

1 example

KPI stat card with a choropleth world-map chart, hover-driven country value/label updates, and a tokenized trend badge.

1 example

KPI stat card with an inline line chart, hover-driven value/label updates, and a tokenized trend badge.

1 example

Elevated KPI tiles beyond a flat number: MetricCard + inline Sparkline (bar or line, coloured by a --chart-* token), a goal/progress tile, and a this-vs-last comparison tile.

1 example

Compact summary widgets: a ranked list with share bars + delta (Sales by country), a leaderboard (Top performers), and a transaction/activity feed with signed amounts.

1 example