"Bento layout" KPI indicator. Asymmetric tile sizes, sparkline as a low-opacity background on each tile, big numerals layered over the chart in the lower-left corner. Hero (Monthly Revenue) spans two rows on the left; two stacked tiles on the right (top); three equal tiles below — magazine-style mixed sizes rather than a uniform grid. Card-level container query collapses the whole bento to a single-column stack when the host card narrows below 700px so the same markup works in narrow page-grid cells.
Key Performance Indicators
LIVE- Current
- $849K
- Previous
- $753K
- Δ absolute
- +$96K
- Δ percent
- +12.8%
- Target
- $900K
- Current
- 86.5%
- Previous
- 84.2%
- Δ percent
- +2.8%
- Target
- 90.0%
- Current
- 85.9%
- Previous
- 71.0%
- Δ percent
- +21.0%
- Headroom
- 14.1%
- Current
- 24.0°C
- Previous
- 24.5°C
- Δ percent
- −2.1%
- Threshold
- ≤ 25°C
- Current
- 0.28%
- Previous
- 0.41%
- Δ percent
- −30.9%
- Target
- ≤ 0.50%
- Current
- ¥12.1M
- Previous
- ¥11.2M
- Δ percent
- +8.1%
- Target
- ¥13.0M
- Current
- $849K
- Δ percent
- +12.8%
- Current
- 86.5%
- Δ percent
- +2.8%
- Current
- 85.9%
- Δ percent
- +21.0%
- Current
- 24.0°C
- Δ percent
- −2.1%
- Current
- 0.28%
- Δ percent
- −30.9%
- Current
- ¥12.1M
- Δ percent
- +8.1%
- Current
- €2.4M
- Δ percent
- +18.4%
- Current
- 62
- Δ
- +4
- Current
- 94.1%
- Δ
- ±0.0%
- Current
- 42.7k
- Δ percent
- +6.2%
- Current
- 3.1%
- Δ
- +0.4%
- Current
- 5.7%
- Δ percent
- +1.2%
- Current
- $128k
- Δ percent
- +9.4%
- Current
- 142ms
- Δ percent
- −12.0%
- Current
- 99.99%
- Δ
- +0.04%
- Current
- 387
- Δ
- +22%
- Current
- 128k
- Δ percent
- +3.8%
- Current
- 3.2m
- Δ percent
- −31%
- Current
- $849K
- Δ percent
- +12.8%
- Current
- 86.5%
- Δ
- +2.8%
- Current
- 85.9%
- Δ
- +21%
- Current
- 24.0°C
- Δ
- −2.1%
- Current
- 0.28%
- Δ
- −31%
- Current
- ¥12.1M
- Δ
- +8.1%
- Current
- $849K
- Δ percent
- +12.8%
- Current
- 86.5%
- Δ
- +2.8%
- Current
- 85.9%
- Δ
- +21.0%
- Current
- 24.0°C
- Δ
- −2.1%
- Current
- 0.28%
- Δ
- −30.9%
- Current
- ¥12.1M
- Δ
- +8.1%
- Current
- €2.4M
- Δ
- +18%
- Current
- 62
- Δ
- +4
- Current
- 94.1%
- Δ
- ±0.0%
- Current
- 42.7k
- Δ
- +6.2%
- Current
- 3.1%
- Δ
- +0.4%
- Current
- 5.7%
- Δ
- +1.2%
Custom chart library · Chart.js in the chart slot
The pa-kpi-bento-tile__chart slot is a plain positioned container — the inline SVG sparkline is just the lightweight default. Each tile below swaps a <canvas data-kpi-chart> in where the <svg> was, rendering a Chart.js bar chart as the tile background instead of the area sparkline — visibly a different chart, same slot. The tile still sets color: var(--pa-kpi-accent), so the bars read currentColor for their sentiment hue and re-colour on theme change — no per-tile chart config needed.
Key Performance Indicators
LIVE- Current
- $849K
- Previous
- $753K
- Δ percent
- +12.8%
- Target
- $900K
- Current
- 86.5%
- Δ percent
- +2.8%
- Target
- 90.0%
- Current
- 85.9%
- Δ percent
- +21.0%
- Headroom
- 14.1%
- Current
- 24.0°C
- Δ percent
- −2.1%
- Threshold
- ≤ 25°C
- Current
- 0.28%
- Δ percent
- −30.9%
- Target
- ≤ 0.50%
- Current
- ¥12.1M
- Δ percent
- +8.1%
- Target
- ¥13.0M
Usage Guide
When to use
Magazine-cover dashboards where one headline KPI deserves disproportionate visual weight, with supporting metrics arranged around it. Sparklines sit behind the values rather than alongside them. Best for marketing pages, exec summaries, and "today at a glance" hero panels. If you want even visual weight across all KPIs, pick Editorial minimal or Numeric strip.
6-tile asymmetric grid
The grid uses CSS grid-template-areas arranged as a 6-col × 3-row layout: hero takes the left half across the top two rows; two stacked tiles fill the right half of those rows; three equal tiles span the bottom row. Tile placement is by source order via :nth-child rules — authoring just lists six tiles in reading order. To rearrange, edit the named-area template; the markup stays unchanged.
Sparkline-behind-value layering
Each tile is an internal 2-row grid ("label delta" / "value value"). The value sits at the bottom-left layered over an absolutely-positioned chart underneath it (z-index: 1 on the value, z-index: 0 on the chart). The sparkline reads through behind the digits rather than living in its own column. Polygon fill is opacity: 0.10 and polyline is stroke-opacity: 0.55 so the chart doesn't compete with the headline number.
Container-relative typography
Hero value: clamp(3.6rem, 22cqi, 7rem). Non-hero: clamp(2rem, 14cqi, 3.2rem). cqi resolves against the tile's width (each tile is its own container via container-type: inline-size), not the card's. So at narrow page-grid widths the digits scale down without manual breakpoints, and at wide canonical widths the hero number gets dramatic without overflowing.
Narrow-width collapse
Card-level container query at max-width: 700px collapses the whole bento to a single-column stack and resets grid-area: auto on every tile so the same markup works inside narrow page-grid cells (1×3 widths, 25% asymmetric placements).
Hover detail popover
Cursor-anchored via Floating UI's computePosition + virtual reference element built from e.clientX/clientY. Same recipe as the other KPI showcases. Sparkline trailing dots use the SVG <circle> → HTML <span> conversion to stay circular at non-square chart aspect ratios (the chart's preserveAspectRatio="none" would otherwise stretch the dot into an oval).
CSS Classes Reference
Card structure
pa-kpi-bento— page-namespace class on.pa-card.pa-kpi-header— flex header with title + LIVE indicator.pa-kpi-live/pa-kpi-live__dot— LIVE pill + animated dot.pa-kpi-bento__body— card body with internal padding (the bento's outer breathing room).pa-kpi-bento__grid— 6×3 named-area grid;:nth-childrules assign each tile to its area.pa-kpi-footer— flex footer caption.
Tiles
pa-kpi-bento-tile— single tile (declares its owncontainer-type: inline-sizefor cqi-relative typography). Carries--pa-kpi-accent.pa-kpi-bento-tile--hero— hero modifier: bigger value (22cqi), bigger min-height in collapsed mode.pa-kpi-bento-tile--positive/--negative/--neutral/--up-strong/--down-strong— sentiment modifiers setting--pa-kpi-accenton the tile.
Tile content
pa-kpi-bento-tile__label— uppercase mono caption (top-left of the internal 2-row grid).pa-kpi-bento-tile__delta— coloured Δ% (top-right; reads--pa-kpi-accent).pa-kpi-bento-tile__value— focal number row (bottom span of the tile, layered over the chart atz-index: 1).pa-kpi-bento-tile__num/pa-kpi-bento-tile__unit— numeric + unit spans inside__value.pa-kpi-bento-tile__chart— absolutely-positioned chart wrapper (z-index: 0, sits behind the value).pa-kpi-bento-tile__chart-svg— fixed-height pinned-to-bottom span containing the SVG (so vertical stretch doesn't distort the line).
Hover detail popover
pa-kpi-detail— popover root (moved to<body>on init;position: fixed, hidden untildata-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.