Marketing/exec dashboard pattern — one headline metric on the left, a vertical rail of compact supporting metrics on the right. Container query collapses to single column on narrow cards. Split-ratio modifiers shift weight onto the hero.
Q4 Revenue Dashboard · Default 1:1 split
LIVE- Current
- $847K
- Previous
- $748K
- Δ absolute
- +$99K
- Δ percent
- ▲ 13.3%
- Target
- tgt $900K
hero_split="2_3" — hero 2/3, rail 1/3
Shifts weight onto the hero. Same markup as above, just one prop change.
Q4 Revenue · 2:3 split
LIVEhero_split="3_4" — hero dominant, rail thin sidebar
Q4 Revenue · 3:4 split
LIVECustom chart library · Chart.js in the hero chart slot
The hero's :chart slot accepts any renderer — here a Chart.js line/area
chart instead of the inline SVG. The slot's currentColor is set by the hero's variant
so Chart.js picks up the sentiment colour automatically and re-colours on theme change.
Q4 Revenue · Chart.js
LIVEUsage Guide
When to use
Marketing or exec dashboards where one headline metric needs to dominate while supporting metrics provide context. Best for "north star" pages, KPI hero sections, single-purpose dashboards. If you want even-weight tiles, see Sparkline list or Editorial minimal.
Hero / rail split
Default is 1:1. hero_split="2_3" gives the hero 2/3 (rail 1/3); "3_4"
gives the hero 3/4 (rail = thin sidebar). Container query at ≤700px stacks the layout into a
single column regardless of split.
Hero meta row
The inline meta row underneath the hero value carries three optional bits: delta_text
(colour from variant), period_text (e.g. "vs last month"), and
target_text (e.g. "tgt $900K"). All three are independently optional. Pass a
:meta snippet for fully-custom markup.
Side tile layout
Each kpi_hero_side is a 2×2 grid: label top-left, delta bottom-left, value spans both
rows on the right. Looks balanced when the label is one line and still reads cleanly when it
wraps to two.
Hero chart slot
Any renderer goes here. The chart container has flex: 1 1 10rem so it grows to fill
extra vertical space when the rail is taller than the hero's natural content. For inline SVG,
wrap in <span class="pa-kpi-hero-main__chart-svg"> so the SVG stays at fixed
pixel height regardless of how tall the parent gets. For Chart.js, just drop a
<canvas data-kpi-chart>.
CSS Classes Reference
Card structure
pa-kpi-hero-list— page-namespace class on.pa-card. Container query host.pa-kpi-hero-list__layout— 2-col grid (hero left, rail right).pa-kpi-hero-list__layout--hero-2-3/--hero-3-4— split-ratio modifiers.pa-kpi-hero-list__rail— flex column for side tiles.
Hero main panel
pa-kpi-hero-main— headline metric panel.pa-kpi-hero-main--positive/--negative/--neutral/--up-strong— sentiment cascade.pa-kpi-hero-main__label/__value/__num/__unit— text elements.pa-kpi-hero-main__meta— inline meta row.pa-kpi-hero-main__delta/__period/__target— meta row cells.pa-kpi-hero-main__chart— chart container.pa-kpi-hero-main__chart-svg— fixed-height SVG wrapper (for inline SVG sparklines).
Side rail tile
pa-kpi-hero-side— compact supporting tile.pa-kpi-hero-side--positive/ etc. — sentiment cascade.pa-kpi-hero-side__label/__value/__num/__unit/__delta.