"Hero + supporting" KPI indicator. One headline metric on the left (huge value, delta + period + target meta row, big sparkline) — the marketing/exec story you want at a glance. A vertical side rail of supporting metrics on the right (compact tiles, each with label · value · delta-vs-prev). Card-level container query collapses the side-by-side layout to stacked when the card narrows below 700px so the same markup works in narrow page-grid cells.
Key Performance Indicators
LIVE- Current
- $852K
- Previous
- $752K
- Δ absolute
- +$100K
- Δ percent
- +13.3%
- Target
- $900K
- Current
- 88.5%
- Previous
- 84.2%
- Δ percent
- +5.1%
- Target
- 90.0%
- Current
- 24.3°C
- Previous
- 24.5°C
- Δ percent
- −1.0%
- Target
- ≤ 25°C
- Current
- 84.4%
- Previous
- 71.0%
- Δ percent
- +18.9%
- Target
- ≤ 80%
- Current
- 0.28%
- Previous
- 0.41%
- Δ percent
- −32.0%
- Target
- ≤ 0.50%
- Current
- ¥12.0M
- Previous
- ¥11.2M
- Δ percent
- +7.0%
- Target
- ¥13.0M
1×3 · .pa-col-1-3 columns
Three smaller cards. Each stays in hero+supporting structure, but the container query (≤700px card width) collapses the side-by-side layout to vertical stacking — hero on top, supporting tiles below. The hero value scales down via cqi-based clamp so it doesn't dwarf the narrow card.
- Current
- 88.5%
- Target
- 90.0%
- Δ percent
- +5.1%
- Current
- 24.3°C
- Δ percent
- −1.0%
- Current
- 0.28%
- Δ percent
- −32.0%
- Current
- $852K
- Δ percent
- +13.3%
- Current
- 84.4%
- Δ percent
- +18.9%
- Current
- ¥12.0M
- Δ percent
- +7.0%
- Current
- ¥12.0M
- Δ percent
- +7.0%
- Current
- 88.5%
- Δ percent
- +5.1%
- Current
- 0.28%
- Δ percent
- −32.0%
2-card stack · .pa-col-25 + .pa-col-45 (asymmetric, 30% empty)
Two page-grid columns. The 25% card is too narrow for any side-by-side layout — hero stacks above supporting (container query catches it). The 45% card also stacks (still under 700px). The hero value scales down via container-relative cqi so it stays proportional.
- Current
- 0.28%
- Δ percent
- −32.0%
- Current
- 88.5%
- Δ percent
- +5.1%
- Current
- 24.3°C
- Δ percent
- −1.0%
- Current
- $852K
- Δ percent
- +13.3%
- Current
- 84.4%
- Δ percent
- +18.9%
- Current
- 0.28%
- Δ percent
- −32.0%
- Current
- ¥12.0M
- Δ percent
- +7.0%
Custom chart library · Chart.js in the chart slot
The pa-kpi-hero-main__chart slot is a plain container — the hand-authored inline SVG sparkline is just the lightweight default. Drop a real charting library in and render any chart type: the example below uses a Chart.js bar chart so the difference from the default sparkline is obvious. It still inherits the layout box and the sentiment cascade for free — the chart wrapper sets color: var(--pa-kpi-accent), so Chart.js reading currentColor picks up the right hue and re-colours on theme change. Markup below swaps a <canvas data-kpi-chart> in where the <svg> was; everything else is unchanged.
Key Performance Indicators
LIVE- Current
- $852K
- Previous
- $752K
- Δ absolute
- +$100K
- Δ percent
- +13.3%
- Target
- $900K
Usage Guide
When to use
Marketing / executive dashboards where one headline metric carries the page and a small set of supporting metrics provide context. The hero gets disproportionate visual weight (huge number + filled-area sparkline + meta row); the side rail is compact tile rows. Best for "today's top number, with a few supporting figures alongside" rather than even-weight grids of KPIs.
Layout
Card body is a 2-column grid: hero on the left, supporting tile rail on the right. A container query at max-width: 700px collapses to single column on narrow page-grid cards (1×3, 25/45 widths) so the same markup works at multiple host widths.
Side-rail tile structure
Each side tile is a 2×2 internal grid with the value spanning both rows on the right column. Left column has label (row 1, align-self: end) and delta (row 2, align-self: start), so they tuck against the vertically-centred value rather than each having a full-width row. Looks balanced when the label is one line and still reads cleanly when it wraps to two.
Hero chart can grow without distorting
When the side rail has more tiles than the hero's natural content fills, the parent grid stretches the hero column. The chart container has flex: 1 1 10rem so it grows to absorb that extra height. The SVG inside is wrapped in a fixed-10rem-height span pinned to the bottom (align-items: flex-end), so the line's Y proportions never distort. Empty space appears above the chart instead of compressing into a void below it. Same shape as the bullet-as-CSS-span fix elsewhere: anything inside preserveAspectRatio="none" stretches with its container, so things-that-shouldn't-stretch need to live outside that scaling or have their dimensions in absolute pixels.
Container-relative hero typography
Hero value uses clamp(4rem, 17cqi, 7rem) to scale with the hero column's width — dramatic at canonical widths, gracefully smaller in narrow page-grid cells. cqi resolves against the card (which declares container-type: inline-size).
Hover detail popover
Cursor-anchored via Floating UI's computePosition + virtual reference element. Each tile's detail is appended to <body> on init to escape ancestor overflow: hidden. Sparkline trailing dots use the SVG <circle> → HTML <span> conversion to stay circular at non-square chart aspect ratios.
CSS Classes Reference
Card structure
pa-kpi-hero-list— page-namespace class on.pa-card. Declarescontainer-type: inline-sizefor the layout collapse.pa-kpi-header— flex header with title + LIVE indicator.pa-kpi-live/pa-kpi-live__dot— LIVE pill + animated dot.pa-kpi-hero-list__body— card body with internal padding.pa-kpi-hero-list__layout— 2-col grid (hero left, rail right). Collapses to 1-col under 700px via container query.pa-kpi-hero-list__rail— vertical stack of side-tiles (right column).pa-kpi-footer— flex footer caption.
Hero (left column)
pa-kpi-hero-main— hero container. Carries--pa-kpi-accent.pa-kpi-hero-main--positive/--negative/--neutral/--up-strong— sentiment modifiers setting--pa-kpi-accent.pa-kpi-hero-main__label— uppercase mono caption.pa-kpi-hero-main__value— focal number (clamp(4rem, 17cqi, 7rem)).pa-kpi-hero-main__num/pa-kpi-hero-main__unit— numeric + unit spans.pa-kpi-hero-main__meta— flex row carrying delta · period · target.pa-kpi-hero-main__delta— coloured Δ% (reads--pa-kpi-accent).pa-kpi-hero-main__period— period descriptor (e.g. "vs last month").pa-kpi-hero-main__target— target value pair.pa-kpi-hero-main__chart— chart wrapper (flex-grow to absorb extra height).pa-kpi-hero-main__chart-svg— fixed-height pinned-to-bottom SVG host (line never distorts).
Side rail tile (right column)
pa-kpi-hero-side— single supporting tile. Carries--pa-kpi-accent.pa-kpi-hero-side--positive/--negative/--neutral/--up-strong— sentiment modifiers.pa-kpi-hero-side__label— caption (top-left of internal 2×2 grid).pa-kpi-hero-side__value— value spanning both rows on the right column.pa-kpi-hero-side__num/pa-kpi-hero-side__unit— numeric + unit spans.pa-kpi-hero-side__delta— coloured Δ% (bottom-left).
Hover detail popover
pa-kpi-detail— popover root (moved to<body>on init).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.