Home/Blocks/KPI grid

KPI grid (deprecated)

A 4-cell row of executive metrics. Each cell is a single number with a sparkline, delta, and a tap-through link.

Deprecated .kpi-grid 4-upExecutive dashboard

Deprecated — use a grid of b-stat-card.

Per audit-reuse D-3, three stat surfaces competed. The canonical choice is now b-stat-card for individual KPI tiles and b-stat-hero for the hero-with-one-lead layout. b-kpi-grid is just a CSS grid wrapper around stat cards — write display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); with .b-stat-card children instead. The legacy .kpi-grid class still ships as an alias for any existing markup.

Default

Used at the top of every overview surface — branch, vertical, group.

Do & don't

Do

Each KPI cell tap-throughs to the report that explains the number.

Don't

Squeeze five or six KPIs across the row. Four is the comprehension limit.

Do

Lead with the value; the delta is the smaller second thing.

Don't

Use different units across the row. Keep the row coherent — all money, or all counts.