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.

KpiBento props

• titleText — card title in the header.
• isLive — show the LIVE pill with animated green dot.
• footerText — footer caption (plain string). Override via footer snippet.

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 / unit / prefix — focal value cell.
• deltaText — Δ% text (coloured by variant).
• chart — snippet for the background sparkline (SVG, canvas, etc.).
• detailTitleText + previousValueText + targetText + deltaAbsoluteText — popover (auto-generated).