When to use

"Spreadsheet-style" KPI scanning: pure tabular numbers, most data per pixel. Best when the operator wants to scan many KPIs side-by-side with consistent column alignment (now / prev / Δ% / vs target). No sparkline, no chart chrome, no decorations. If you need direction or trend at a glance, pick Sparkline list or Terminal grid; if you want headline numbers with restraint, pick Editorial minimal.

Wide-only by design

This showcase has no responsive collapse. The narrow-card "stack each row into a mini-card" pattern was tried first but converged visually with the Comparison gauges showcase. For narrow page-grid placements (1×3 cards, 25% asymmetric cells) route to Comparison gauges instead. The 25/35/40 page-grid row demonstrates how cramped the columns get below the design's comfortable width — values can wrap or push past the column tracks. End-developer's call whether that's acceptable.

Table-card mode

.pa-kpi-strip__body applies padding: 0 so each row's border-top divider extends edge-to-edge. The horizontal inset lives on each row (padding: 1.1rem 1.6rem), matching what would have been the body's inline padding. Reads as the card's content rather than a table sitting inside another panel.

Per-row grid (not subgrid)

Each .pa-kpi-strip__row is its own grid sharing the same column template. This gives per-row hover hosts (needed for the cursor-anchored detail popover) while keeping cells aligned across rows because every row uses identical fr-units. CSS subgrid would be more semantically accurate but would duplicate the same effective layout in more lines.

Bar + percent in the target column

The "vs target" column carries a tiny progress bar with the percent value pinned below it. Bar fill is theme-neutral grey via color-mix(in srgb, var(--pa-text-color-1) 40%, transparent); the percent value (e.g. "97%" vs "108%" vs "54%") signals overshoot/undershoot, so colour reinforcement isn't needed. Bar is visually capped at 100% so over-target metrics read as "fully filled" rather than overflowing.

Column toggle modifiers

metric and now are mandatory. prev, delta, and target are independently optional via pa-kpi-strip--no-prev, --no-delta, --no-target on the card root. The modifiers compose freely, so the visible column count lands anywhere from 5 (no toggles) down to 2 (all three optional columns dropped: metric + now only). The framework precomputes a grid-template-columns selector for every combination, so consumers only toggle the classes — no manual track-width tuning.

How it works: markup always includes all five cells (data and header) in canonical source order — metric, now, prev, delta, target. Each toggle modifier applies display: none to its column's cells (the framework targets .pa-kpi-strip__prev, __delta, __target data cells and __head--prev, --delta, --target header cells), and a matching compound selector adjusts grid-template-columns to the new visible column count. Source order is preserved so CSS Grid auto-flow places the remaining cells into the right tracks.

Headers need per-column modifier classes for hiding to work — pa-kpi-strip__head--metric, --now, --prev, --delta, --target. Data cells already carry their column-specific class (__metric, __now, etc.) so the data side works without changes.

Card structure

• pa-kpi-strip — page-namespace class on .pa-card.
• pa-kpi-strip--no-prev / --no-delta / --no-target — composable column toggle modifiers. Each hides its column's cells (data + header) and adjusts grid-template-columns via a precomputed compound selector. Visible columns range from 5 (no toggles) to 2 (all three toggles — metric + now only).
• pa-kpi-header — flex header with title + LIVE indicator.
• pa-kpi-live / pa-kpi-live__dot — LIVE pill + animated dot.
• pa-kpi-strip__body — applies padding: 0 so dividers go edge-to-edge.
• pa-kpi-footer — flex footer caption.

Rows

• pa-kpi-strip__head-row — header row (uppercase mono labels).
• pa-kpi-strip__row — data row. Carries hover host for the cursor-anchored popover and per-row inline padding so dividers extend edge-to-edge.
• pa-kpi-strip__head — header cell (uppercase mono, 42% contrast).
• pa-kpi-strip__head--num — right-aligned variant (matches the right-aligned numeric cells below).
• pa-kpi-strip__head--metric / --now / --prev / --delta / --target — per-column modifier classes on header cells. Required for the --no-* toggles to hide the matching header cell along with its data column.

Row cells

• pa-kpi-strip__metric — uppercase mono metric label (78% contrast, allowed to wrap to two lines).
• pa-kpi-strip__now — focal "now" value (largest text in the row, right-aligned).
• pa-kpi-strip__num / pa-kpi-strip__unit — numeric + unit spans inside __now.
• pa-kpi-strip__prev — previous-period value (lower contrast than __now).
• pa-kpi-strip__delta — coloured Δ% value (right-aligned).
• pa-kpi-strip__target — vertical stack: bar + percent below.
• pa-kpi-strip__bar — progress track (0.5rem tall, theme-neutral background).
• pa-kpi-strip__fill — bar fill. Width set inline per row via style="width: X%".
• pa-kpi-strip__bar-pct — percent label pinned below the bar's right edge.

Delta sentiment modifiers

• pa-kpi-strip__delta--positive — ordinary positive movement.
• pa-kpi-strip__delta--negative — ordinary negative movement.
• pa-kpi-strip__delta--neutral — no meaningful change.
• pa-kpi-strip__delta--up-strong — outlier positive (deeper green).
• pa-kpi-strip__delta--down-strong — outlier negative (deeper red).

Hover detail popover

• pa-kpi-detail — popover root (moved to <body> on init; position: fixed, hidden until data-show).
• pa-kpi-detail__title — uppercase mono header.
• pa-kpi-detail .pos / .neg / .warn — sentiment-coloured <dd> text.

Framework tokens used by this showcase

• --pa-very-positive / --pa-positive / --pa-neutral / --pa-negative / --pa-very-negative — 5-step semantic sentiment scale.
• --pa-warning — orange "off-target / approaching limit" signal.
• --pa-detail-bg / --pa-detail-text / --pa-detail-row-label / --pa-detail-title / --pa-detail-shadow — popover chrome.