Each KPI is one row: label · sparkline · value · Δ%. Built for fast vertical scanning rather than per-tile depth. The sparkline gets a filled area underneath the line for stronger visual weight. Container queries on the card collapse the row template from 4-col → 2-row → 3-row as the card narrows.
Live KPIs · 24h
LIVE- Current
- $848K
- Previous
- $754K
- Δ percent
- ▲ 12.4%
- Target
- $900K
- Current
- 12.3K
- Previous
- 9.5K
- Δ percent
- ▲ 28.7%
- Target
- 10K
- Current
- 3.92%
- Previous
- 3.76%
- Δ percent
- ▲ 4.3%
- Target
- 4.0%
- Current
- 42.1%
- Previous
- 39.8%
- Δ percent
- ▲ 5.8%
- Target
- ≤ 40%
- Current
- 0.18%
- Previous
- 0.29%
- Δ percent
- ▼ 38.0%
- Target
- ≤ 0.30%
- Current
- 148ms
- Previous
- 147 ms
- Δ percent
- ▲ 0.7%
- Target
- ≤ 200ms
1×3 · .pa-col-1-3 columns
Each card holds two rows in its own .pa-col-1-3. Container queries collapse the row
template to a 2-row stack at mid-narrow widths — same markup, different layout per card.
- Current
- $848K
- Previous
- $754K
- Δ percent
- ▲ 12.4%
- Target
- $900K
- Current
- 12.3K
- Previous
- 9.5K
- Δ percent
- ▲ 28.7%
- Target
- 10K
- Current
- 3.92%
- Previous
- 3.76%
- Δ percent
- ▲ 4.3%
- Target
- 4.0%
- Current
- 42.1%
- Previous
- 39.8%
- Δ percent
- ▲ 5.8%
- Target
- ≤ 40%
- Current
- 0.18%
- Previous
- 0.29%
- Δ percent
- ▼ 38.0%
- Target
- ≤ 0.30%
- Current
- 148ms
- Previous
- 147 ms
- Δ percent
- ▲ 0.7%
- Target
- ≤ 200ms
Asymmetric · 25 + 45 + 25, third card uses --chart-first
The very-narrow third card opts into is_chart_first — rotates the canonical L→R order
90°: label on top, chart in the middle, value+delta side-by-side at the bottom. Compare the second
and third cards side-by-side.
- Current
- $848K
- Previous
- $754K
- Δ percent
- ▲ 12.4%
- Target
- $900K
- Current
- 12.3K
- Previous
- 9.5K
- Δ percent
- ▲ 28.7%
- Target
- 10K
- Current
- 3.92%
- Previous
- 3.76%
- Δ percent
- ▲ 4.3%
- Target
- 4.0%
- Current
- 42.1%
- Previous
- 39.8%
- Δ percent
- ▲ 5.8%
- Target
- ≤ 40%
- Current
- $848K
- Previous
- $754K
- Δ percent
- ▲ 12.4%
- Target
- $900K
- Current
- 12.3K
- Previous
- 9.5K
- Δ percent
- ▲ 28.7%
- Target
- 10K
is_no_delta: drop the rightmost Δ% column
Useful when the chart slope already conveys direction.
Compact KPIs
- Current
- $848K
- Previous
- $754K
- Δ percent
- ▲ 12.4%
- Target
- $900K
- Current
- 12.3K
- Previous
- 9.5K
- Δ percent
- ▲ 28.7%
- Target
- 10K
- Current
- 3.92%
- Previous
- 3.76%
- Δ percent
- ▲ 4.3%
- Target
- 4.0%
Custom chart library · Chart.js in the chart slot
Each row's chart is a <canvas data-kpi-chart> instead of the inline SVG. The
PureAdminKpiChart hook renders a Chart.js line/area chart in the same cell, picking
up the row's sentiment currentColor.
Live KPIs · Chart.js
LIVEUsage Guide
When to use
Side-by-side comparison of many metrics in one panel, with the sparkline shape giving fast visual confirmation of the delta direction. Best for executive overviews, "live KPI strip" pages, observability dashboards. If you need per-tile depth (status pill, detail tabs) use Terminal grid; if you want huge focal numbers with light supporting visuals use Editorial minimal.
Row contract
Each row is label · chart · value · Δ% in a 4-column grid. The chart cell uses
preserveAspectRatio="none"; the trailing dot is converted by the
PureAdminKpiSparkDot hook to a CSS-pixel span so it stays round.
--no-delta + --chart-first modifiers
is_no_delta drops the rightmost Δ% column — the row template shrinks to 3 cols at wide
widths, the delta cell is hidden via display: none. Compose with is_chart_first
for a clean 3-row stack at mid-narrow widths.
Container queries
The card sets container-type: inline-size on .pa-kpi-spark-list, so rows
react to card width, not viewport. At ≤640px each row stacks into a 2-row layout (label/value/delta
on top, full-width chart below); at ≤360px it becomes 3 rows. The same markup adapts to every cell width.
Hover detail popover
Same recipe as the Terminal grid: each row is the hover host; the row's pa-kpi-detail
moves to <body> on mount, then follows the cursor via a virtual reference
element. Auto-built rows from typed props (Current / Previous / Δ absolute / Δ percent / Target).
CSS Classes Reference
Card structure
pa-kpi-spark-list— page-namespace class on.pa-card. Container query host.pa-kpi-spark-list--no-delta— drops the rightmost Δ% column.pa-kpi-spark-list--chart-first— rotates the L→R order 90° at narrow widths.pa-kpi-spark-list__body— card body, zero padding.
Row + cells
pa-kpi-spark-row— single data row.pa-kpi-spark-row--up-strong/--up/--flat/--down/--down-strong— chart sentiment.pa-kpi-spark-row__label/__chart/__value/__delta— cell elements.pa-kpi-spark-row__num/__unit— value spans.pa-kpi-spark-row__delta--positive/--negative/ etc. — delta sentiment.
Sparkline
pa-kpi-spark-wrap/pa-kpi-spark-dot— JS-injected wrapper + dot.pa-kpi-detail+__title— popover element.
Framework tokens used by this showcase
--pa-positive/--pa-negative/ etc. — sentiment palette.--pa-chart-trendline-height(3rem) /--pa-chart-trendline-stroke(2.1) — sparkline geometry.--pa-detail-*— popover chrome.