Magazine-style asymmetric tile sizing with sparklines as soft background fills behind the values.
Default 6-tile layout (hero left + 2 stacked right + 3 across bottom); bento_layout="hero_right"
mirrors; bento_layout="5_tile" is hero + 4 supporting. Tile placement is by source order
via :nth-child so markup stays identical across modifiers.
Quarterly snapshot · default (hero-left)
LIVE- Current
- $849K
- Previous
- $749K
- Δ percent
- ▲ 13.4%
- Target
- $900K
bento_layout="hero_right" — mirror of default
Quarterly snapshot · hero-right
- Current
- $849K
- Previous
- $749K
- Δ percent
- ▲ 13.4%
- Target
- $900K
bento_layout="5_tile" — hero + 4 supporting
Five tiles in source order: hero, 2 stacked right (rows 1-2), 2 equal halves bottom.
5-tile dashboard
- Current
- $849K
- Previous
- $749K
- Δ percent
- ▲ 13.4%
- Target
- $900K
1×3 · row_height="14rem"
Each card holds a 5-tile bento in its own .pa-col-1-3. row_height bumped to 14rem so the narrow tiles don't compress.
- Current
- $849K
- Previous
- $749K
- Δ percent
- ▲ 13.4%
- Target
- $900K
- Current
- $849K
- Previous
- $749K
- Δ percent
- ▲ 13.4%
- Target
- $900K
- Current
- $849K
- Previous
- $749K
- Δ percent
- ▲ 13.4%
- Target
- $900K
Custom chart library · Chart.js in the bento chart slot
The background chart per tile is a <canvas data-kpi-chart> instead of inline SVG.
The line/area renders behind the digits at lower opacity (Chart.js backgroundColor alpha
handled by the hook), inheriting the tile's sentiment currentColor.
Quarterly snapshot · Chart.js
LIVEUsage Guide
When to use
Magazine-style asymmetric dashboards where one metric should dominate visually and a few supporting metrics need to feel like a curated layout (not a uniform grid). Sparklines as soft background fills behind the values. Less data per tile than Terminal grid; more density than Hero + supporting.
Layout contract
Tiles are placed by source order via :nth-child. The 1st tile is
the hero (with is_hero), the next 2 are right-column stacked, the next 3 are equal
bottom-row tiles. Default 6 tiles; layout modifiers (hero_right, 5_tile)
only swap grid-template-areas — tile markup stays unchanged.
Sparkline opacity
The bento sparkline sits behind the value (z-index layering, not column placement). Stroke is 55% opacity; fill is 10% — soft enough that the number stays the focal point but the chart still reads as a defined shape.
Container queries
At ≤700px the bento collapses to a single column stack, resetting grid-area on
every tile so the same markup works in narrow page-grid cells. Each tile is also its own
container query host so the value's cqi-based font-size scales with the tile's
actual width.
--pa-kpi-bento-row-height
Default row height is 12rem. Override per instance via the row_height
attr (emits inline style="--pa-kpi-bento-row-height: ..."). Useful in narrow page-grid
cells where the default rows feel cramped.
CSS Classes Reference
Card structure
pa-kpi-bento— page-namespace class on.pa-card. Container query host.pa-kpi-bento__body— card body.pa-kpi-bento__grid— 6-col × 3-row grid.pa-kpi-bento__grid--hero-right— mirror of default (hero on right).pa-kpi-bento__grid--5-tile— hero + 4 supporting.
Layout CSS variables
--pa-kpi-bento-row-height— row height (default12rem).
Tile
pa-kpi-bento-tile— single cell. Carries--pa-kpi-accent.pa-kpi-bento-tile--hero— larger value + chart for the hero cell.pa-kpi-bento-tile--positive/--negative/--neutral/--up-strong/--down-strong— sentiment cascade.pa-kpi-bento-tile__label/__delta/__value/__num/__unit.pa-kpi-bento-tile__chart/__chart-svg— background sparkline.