"Bento" KPI layout — magazine-style asymmetric tile sizing with sparklines as soft background fills behind the values.
Six tiles arranged on a 6-col × 3-row grid: one hero (left-half × 2 rows), two stacked (right-half × 2 rows),
three equal tiles in the bottom row. Pass tiles in order — placement is by source order via :nth-child.
Container query collapses to single-column under 700 px.
Key Performance Indicators
- Current
- $871K
- Previous
- $752K
- Δ percent
- +15.8%
- Target
- $900K
- Current
- 87.9%
- Δ percent
- +4.4%
- Target
- 90.0%
- Current
- 25.0°C
- Δ percent
- +1.9%
- Target
- ≤ 25°C
- Current
- 86.8%
- Δ percent
- +22.2%
- Target
- 80.0%
- Current
- 0.28%
- Δ percent
- -32.6%
- Target
- ≤ 0.50%
- Current
- ¥12.1M
- Δ percent
- +8.5%
- Target
- ¥13.0M
Layout variant · pa-kpi-bento__grid--hero-end
Mirror of the default layout — hero spans the right half × 2 rows, two stacked supporting tiles on
the left of rows 1-2, three equal tiles below. Same 6-tile contract; source order is unchanged
(1st = hero). Only the named-area template flips via layout="hero-end".
Key Performance Indicators
- Current
- $849K
- Previous
- $753K
- Δ 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%
- Target
- 80.0%
- Current
- 24.0°C
- Previous
- 24.5°C
- Δ percent
- -2.1%
- Target
- ≤ 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
Layout variant · pa-kpi-bento__grid--5-tile
Five-tile composition — hero spans left × 2 rows, two stacked supporting tiles on the right of
rows 1-2, two equal halves on the bottom row. Use layout="5-tile" when you have exactly
5 KPIs; pass exactly 5 tiles (a 6th breaks the layout).
Key Performance Indicators
- Current
- $849K
- Previous
- $753K
- Δ 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%
- Target
- 80.0%
- Current
- 24.0°C
- Previous
- 24.5°C
- Δ percent
- -2.1%
- Target
- ≤ 25°C
- Current
- 0.28%
- Previous
- 0.41%
- Δ percent
- -30.9%
- Target
- ≤ 0.50%
Usage Guide
When to use
Editorial-feeling dashboards where one KPI is the headline and the rest are supporting. The hero tile gets a container-query-relative value so it scales gracefully across page-grid widths. The asymmetric layout reads as "magazine cover": the eye lands on the hero first, then sweeps right and down through the supporting tiles.
Tile order matters
Tile placement is hardcoded by source order via :nth-child. Pass exactly 6 tiles in this order: hero, a (top-right), b (bottom-right), c (bottom-left), d (bottom-middle), e (bottom-right).
Mark the first tile with isHero for the larger value font + taller chart.
Chart as background
The chart cell is absolutely positioned across the bottom 65% of the tile with z-index 0; label / delta / value sit at z-index 1 over it. Polyline opacity 0.55, fill opacity 0.10 — soft enough that the focal value stays readable but the trend is still legible.
Component Reference
KpiBento props
titleText— card title in the header.isLive— show the LIVE pill with animated green dot.footerText— footer caption (plain string). Override viafootersnippet.
KpiBentoTile props
variant— accent colour:positive/negative/neutral/up-strong/down-strong.isHero— bump value font + chart height. Set on the first (left-half) tile.labelText— uppercase mono label.valueText/unitText/prefixText— focal value cell.deltaText— Δ% text (coloured byvariant).chart— snippet for the background sparkline (SVG, canvas, etc.).detailTitleText+previousValueText+targetText+deltaAbsoluteText— popover (auto-generated).