"Hero + supporting" KPI layout — one headline metric on the left with a huge container-query-relative value, inline meta row (delta · period · target) and a generous filled-area sparkline; a vertical rail of compact supporting tiles on the right. Marketing/exec dashboards. Container query collapses to single column under 700 px.
Split-ratio modifiers shift weight to the hero without touching markup: default is 1:1 (50/50), heroSplit="2-3" gives the hero 2/3 of the width, heroSplit="3-4" makes the rail a thin sidebar. Pick the proportion that fits your hero's visual weight need.
Key Performance Indicators
LIVE- Current
- $871K
- Previous
- $752K
- Δ absolute
- +$119K
- Δ percent
- +15.8%
- Target
- tgt $900K
- Current
- 87.9%
- Δ percent
- +4.4%
- Target
- 90.0%
- Current
- 25.0°C
- Δ percent
- +1.9%
- Target
- ≤ 25°C
- Current
- 0.28%
- Δ percent
- -32.6%
- Target
- ≤ 0.50%
- Current
- 4.7
- Δ percent
- ±0.0
- Target
- 4.8
Layout variant · heroSplit="2-3"
Hero gets 2/3 of the width, rail 1/3. Pushes more visual weight onto the headline metric — common in
marketing/exec layouts where the supporting tiles are reference rather than focal. Source markup is identical
to the canonical; only the heroSplit prop changes.
Key Performance Indicators
LIVE- Current
- $852K
- Previous
- $752K
- Δ absolute
- +$100K
- Δ percent
- +13.3%
- Target
- tgt $900K
- Current
- 88.5%
- Δ percent
- +5.1% vs prev
- Target
- 90.0%
- Current
- 0.28%
- Δ percent
- -32.0% vs prev
- Target
- ≤ 0.50%
- Current
- ¥12.0M
- Δ percent
- +7.0% vs prev
- Target
- ¥13.0M
Layout variant · heroSplit="3-4"
Hero gets 3/4 of the width, rail 1/4 (a thin sidebar). The hero-dominant shape — the rail becomes a quick
reference column rather than an equal-weight partner. At narrow card widths the same @container breakpoint applies, so the layout still collapses to a stack below 700 px regardless
of which split-ratio modifier the layout carries.
Key Performance Indicators
LIVE- Current
- $852K
- Previous
- $752K
- Δ absolute
- +$100K
- Δ percent
- +13.3%
- Target
- tgt $900K
- Current
- 88.5%
- Δ percent
- +5.1% vs prev
- Target
- 90.0%
- Current
- 0.28%
- Δ percent
- -32.0% vs prev
- Target
- ≤ 0.50%
- Current
- ¥12.0M
- Δ percent
- +7.0% vs prev
- Target
- ¥13.0M
Usage Guide
When to use
The "one big number plus context" pattern — marketing/exec dashboards, weekly review pages, board updates. The hero panel gives the headline metric a generous, container-query-relative size with a big filled-area sparkline; the rail provides supporting metrics in a column. The whole layout collapses to single column under 700 px.
Split-ratio modifiers
Pass heroSplit on KpiHeroList to shift weight to the hero without touching the
markup. Default (omitted) is 1:1 (50/50). "2-3" gives the hero 2/3 of the
width — common executive layout. "3-4" makes the rail a thin sidebar — most aggressive
hero-dominance shape. The @container 700 px collapse rule still neutralises any modifier's
grid-template-columns at narrow widths, so the same source works in narrow page-grid cells.
Sentiment cascade
Both KpiHeroMain and KpiHeroSide accept a variant prop that drives a --pa-kpi-accent cascade var. Hero variants: positive / negative / neutral / up-strong. The delta cell and the hero chart line both pick the colour up
via currentColor.
Component Reference
KpiHeroList props
titleText— card title in the header.isLive— show the LIVE pill with animated green dot.footerText— footer caption (plain string). Override viafootersnippet.heroSplit— split-ratio modifier:"2-3"(hero 2/3, rail 1/3) or"3-4"(hero 3/4, rail thin sidebar). Default omitted = 1:1.rail— snippet for the right-side rail (passKpiHeroSideinstances).
KpiHeroMain props
variant— accent colour:positive/negative/neutral/up-strong.labelText— uppercase mono label.valueText/unit/prefix— headline value cell.deltaText+periodText+targetText— meta row.chart— snippet for the sparkline (wrap SVG in<div class="pa-kpi-hero-main__chart-svg">).detailTitleText+previousValueText+deltaAbsoluteText— popover (auto-generated).targetTextis also fed into the popover.detailRowstyped override +detailsnippet for fully-custom popover.
KpiHeroSide props
variant— accent colour (same 4-step scale as hero).labelText— uppercase mono label.valueText/unit/prefix— value cell.deltaText— Δ% text (coloured byvariant).detailTitleText+previousValueText+targetText+deltaAbsoluteText— popover (auto-generated).