"Editorial minimal" KPI indicator. Magazine-cover restraint — six KPIs in a 2×3 grid, hairline rules between cells, light-weight numerals, no charts, no pills, no decorations. The whole design's expressive energy goes into one thing: a generous, low-weight number that owns the cell. The label is a tiny uppercase mono caption above it; the delta and target sit beneath as a small meta row. Built for executive dashboards / weekly review pages where the operator wants to see "how are we doing" at a glance and read the supporting context only on hover. Renders as a table card (zero card-body padding, dividers go edge-to-edge to the card border).
Key Performance Indicators
LIVERate
- Current
- 86.9%
- Previous
- 84.1%
- Δ percent
- +3.3%
- Target
- 90.0%
- vs target
- 97%
Revenue
- Current
- $871K
- Previous
- $752K
- Δ absolute
- +$119K
- Δ percent
- +15.8%
- Target
- $900K
- vs target
- 97%
Temp
- Current
- 25.0°C
- Previous
- 24.5°C
- Δ percent
- +1.9%
- Threshold
- ≤ 25.0°C
- Headroom
- at limit
Capacity
- Current
- 86.8%
- Previous
- 71.0%
- Δ percent
- +22.2%
- Target
- 80.0%
- vs target
- 108%
Rate
- Current
- 0.28%
- Previous
- 0.42%
- Δ percent
- −32.6%
- Target
- ≤ 0.50%
- vs target
- 56%
Office
- Current
- ¥12.1M
- Previous
- ¥11.2M
- Δ percent
- +8.5%
- Target
- ¥13.0M
- vs target
- 93%
Performance
LIVERate
- Now
- 86.9%
- Δ
- +3.3%
- Now
- 0.28%
- Δ
- −32.6%
- Now
- 86.8%
- Δ
- +22.2%
- Now
- 142ms
- Δ
- +8.0%
Revenue
LIVE- Now
- $871K
- Δ
- +15.8%
- Now
- €2.4M
- Δ
- +18.0%
- Now
- 5.7%
- Δ
- +1.2%
- Now
- $312
- Δ
- −4.5%
Customer
LIVE- Now
- 62
- Δ
- +4.0
- Now
- 4.7
- Δ
- ±0.0
- Now
- 42.7k
- Δ
- +6.2%
- Now
- 3.1%
- Δ
- +0.4%
Top line
LIVE- Now
- $871K
- Δ
- +15.8%
- Now
- 5.7%
- Δ
- +1.2%
Operations
LIVE- Now
- 86.8%
- Δ
- +22.2%
- Now
- 0.28%
- Δ
- −32.6%
- Now
- 142ms
- Δ
- +8.0%
- Now
- 99.97%
- Δ
- ±0.00
- Now
- 8.4k/s
- Δ
- +11.2%
- Now
- 62.4%
- Δ
- +0.6%
Customer
LIVE- Now
- 62
- Δ
- +4.0
- Now
- 42.7k
- Δ
- +6.2%
Usage Guide
When to use
Executive dashboards / weekly review pages. The design's identity is restraint — one big light-weight number per tile, hairline rules, generous space, no chart chrome. Best when the operator wants "how are we doing" at a glance and reads the supporting context only on hover. If you need sparklines, status pills, or trend indication directly in the tile, pick a different showcase.
Hairline rules
Dividers between cells are painted by gap: 1px on .pa-kpi-edit__grid over a background: var(--pa-border-color); each tile paints --pa-card-bg over its own area. Only the gap shows through, giving single-pixel hairlines on every interior boundary regardless of column count. The card's outer border supplies the perimeter — render the card with .pa-kpi-edit__body at zero padding (table-card mode) so the rules go edge-to-edge.
Picking the column count
Default is cell-min-driven: grid-template-columns: repeat(auto-fit, minmax(var(--pa-kpi-edit-cell-min, 14rem), 1fr)). Cells stay at least --pa-kpi-edit-cell-min wide (override per instance to change density); the grid fits as many columns as the container allows. No @container queries — the responsive cascade is intrinsic to the grid template.
Two override families when the cell-min default isn't enough:
pa-kpi-edit__grid--2col— forces exactly 2 columns regardless of cell-min or container width. Use for "always a 2×N grid" placements.pa-kpi-edit__grid--max-2/--max-3/--max-4/--max-5/--max-6— caps the column count. Behaves like the default below the threshold (collapses on narrow widths), then stops growing past N on wide widths. Pick the cap to match your typical item count so rows pack cleanly — with 6 items and--max-3you get 3+3; without a cap you can land on 4+2 with a gray void filling row 2 (the gap-background showing through tracks that have items in row 1 but not in row 2).
Authoring contract
- Pick the column behaviour: cell-min default (best for variable item counts),
--max-Nceiling (best when item count divides cleanly into N), or--2col(forced 2-col). - Drop tiles in reading order — CSS Grid auto-flow handles row/column placement.
- Each tile carries its own
.pa-kpi-detailpopover; the script moves it to<body>on init and anchors it to the cursor on hover. - Use
.pa-kpi-edit__delta--{positive | negative | neutral | up-strong | down-strong}on the delta to colour-code sentiment from the shared--kpi-*token surface.
Light-weight typography
The headline value uses the body sans at font-weight: 200, not mono — mono fonts rarely ship a true thin weight, and the design's identity is the editorial thin numeral. Tabular numerals are preserved via font-variant-numeric: tabular-nums so column-aligned values still line up. Size is container-relative via clamp(3.2rem, 22cqi, 5.6rem); each tile is its own container-type: inline-size so cqi measures per-cell, not per-grid — typography tracks each cell's actual width as the grid packs more columns into a wider container.
Hover detail popover
Cursor-anchored via Floating UI's computePosition + a virtual reference element built from e.clientX/clientY. position: fixed + strategy: 'fixed' because cursor coords are viewport-relative; pointer-events: none so the cursor passes through to the tile (no oscillation). Each .pa-kpi-detail is moved to <body> on init to escape ancestor overflow: hidden.
CSS Classes Reference
Card structure
pa-kpi-edit— page-namespace class on.pa-card. Optional anchor for theme-scoped overrides.pa-kpi-header— flex header with title + LIVE indicator.pa-kpi-live— LIVE pill (mono caps + animated dot).pa-kpi-live__dot— pulsing dot inside the LIVE pill.pa-kpi-edit__body— appliespadding: 0to.pa-card__bodyso dividers go edge-to-edge.pa-kpi-footer— flex footer caption + "Hover any KPI for detail" hint.
Grid + tiles
pa-kpi-edit__grid— grid container. Defaultgrid-template-columns: repeat(auto-fit, minmax(var(--pa-kpi-edit-cell-min, 14rem), 1fr)).gap: 1pxover--pa-border-colorbackground paints the hairlines.pa-kpi-edit__grid--2col— forces exactly 2 columns regardless of width.pa-kpi-edit__grid--max-2/--max-3/--max-4/--max-5/--max-6— caps the column count at N. Still collapses below the cell-min × N threshold; just won't exceed N on wide widths. Usesminmax(max(cell-min, calc((100% − gap × (N−1)) / N)), 1fr)so cell-min wins on narrow widths and the calc wins on wide widths.pa-kpi-edit__tile— single KPI cell.2.4rem 2rempadding,--pa-card-bgover the grid background.container-type: inline-sizeso the value'scqifont-size measures per-cell.
Tile content
pa-kpi-edit__label— uppercase mono caption (50% contrast, allowed to wrap).pa-kpi-edit__value— headline number row (body sans,font-weight: 200,clamp(3.2rem, 22cqi, 5.6rem);cqiresolves per-tile).pa-kpi-edit__num— numeric span inside__value(tabular nums).pa-kpi-edit__unit— currency / percent / unit span (40% size, dim).pa-kpi-edit__meta— flex row carrying delta + target.pa-kpi-edit__delta— coloured delta number.pa-kpi-edit__target— dim "tgt {value}" pair;eminside is the literal "tgt" prefix.
Delta sentiment modifiers
pa-kpi-edit__delta--positive— ordinary positive movement.pa-kpi-edit__delta--negative— ordinary negative movement.pa-kpi-edit__delta--neutral— no meaningful change (±0.0).pa-kpi-edit__delta--up-strong— outlier positive (deeper green).pa-kpi-edit__delta--down-strong— outlier negative (deeper red).
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 inside the popover.pa-kpi-detail .pos / .neg / .warn— sentiment-coloured<dd>text inside the detail's<dl>.
Showcase-scoped CSS variables
--pa-kpi-edit-cell-min(default14rem) — minimum cell width that drives the auto-fit grid. Smaller → more columns at the same container width; larger → fewer columns. Override per instance:<div class="pa-kpi-edit__grid" style="--pa-kpi-edit-cell-min: 18rem">.
Framework tokens used by this showcase
--pa-very-positive/--pa-positive— green sentiment scale.--pa-neutral— grey for "no meaningful change".--pa-negative/--pa-very-negative— red 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 (Bloomberg-dark by default; override for theme-aware popovers).