"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 "how are we doing" at a glance and reads 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%
Revenue
- Current
- $871K
- Previous
- $752K
- Δ absolute
- +$119K
- Δ percent
- +15.8%
- Target
- $900K
Temp
- Current
- 25.0°C
- Previous
- 24.5°C
- Δ percent
- +1.9%
- Target
- 25.0°C
Capacity
- Current
- 86.8%
- Previous
- 71.0%
- Δ percent
- +22.2%
- Target
- 80.0%
Rate
- Current
- 0.28%
- Previous
- 0.42%
- Δ percent
- -32.6%
- Target
- 0.50%
Office
- Current
- ¥12.1M
- Previous
- ¥11.2M
- Δ percent
- +8.5%
- Target
- ¥13.0M
1×3 page-grid demonstrating the design at 1/3-width cards. Each card's internal grid forces 2-col via is2Columns.
Performance
LIVERate
- Current
- 86.9%
- Δ percent
- +3.3%
- Target
- 90.0%
- Current
- 0.28%
- Δ percent
- -32.6%
- Target
- 0.50%
- Current
- 86.8%
- Δ percent
- +22.2%
- Target
- 80.0%
- Current
- 142ms
- Δ percent
- +8.0%
- Target
- 120ms
Revenue
LIVE- Current
- $871K
- Δ percent
- +15.8%
- Target
- $900K
- Current
- €2.4M
- Δ percent
- +18.0%
- Target
- €2.6M
- Current
- 5.7%
- Δ percent
- +1.2%
- Target
- 7.0%
- Current
- $312
- Δ percent
- -4.5%
- Target
- $300
Customer
LIVE- Current
- 62
- Δ percent
- +4.0
- Target
- 65
- Current
- 4.7
- Δ percent
- ±0.0
- Target
- 4.8
- Current
- 42.7k
- Δ percent
- +6.2%
- Target
- 45k
- Current
- 3.1%
- Δ percent
- +0.4%
- Target
- 2.5%
Asymmetric 25 / 45 / 30 page-grid showing how the design behaves across cells of different widths. The 25 % card crosses the 360 px container-query breakpoint to single-column at typical viewport widths; the 45 % card stays multi-col; the 30 % card sits at the awkward zone right around the 360 px breakpoint.
Top line
LIVE- Current
- $871K
- Δ percent
- +15.8%
- Target
- $900K
- Current
- 5.7%
- Δ percent
- +1.2%
- Target
- 7.0%
Operations
LIVE- Current
- 86.8%
- Δ percent
- +22.2%
- Target
- 80.0%
- Current
- 0.28%
- Δ percent
- -32.6%
- Target
- 0.50%
- Current
- 142ms
- Δ percent
- +8.0%
- Target
- 120ms
- Current
- 99.97%
- Δ percent
- ±0.00
- Target
- 99.95%
- Current
- 8.4k/s
- Δ percent
- +11.2%
- Target
- 9k/s
- Current
- 62.4%
- Δ percent
- +0.6%
- Target
- 70%
Customer
LIVE- Current
- 62
- Δ percent
- +4.0
- Target
- 65
- Current
- 42.7k
- Δ percent
- +6.2%
- Target
- 45k
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.
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.
Picking the column count
Default is 3-col with container queries collapsing to 2-col under 640 px and 1-col under 360 px. Pass is2Columns on KpiEditorial to force 2-col regardless of card width — useful
when "1/3 of the page" varies enough across viewport widths that the breakpoint can't reliably catch
the right bucket. Keep tile count a multiple of column count to avoid orphan rows.
Component Reference
KpiEditorial props
titleText— card title in the header.isLive— show the LIVE pill with animated green dot.footerText— footer caption (plain string). Override viafootersnippet.is2Columns— force 2-column grid (pa-kpi-edit__grid--2col).
KpiEditorialTile props
labelText— single-line label. Use thelabelsnippet for multi-line (<br>).valueText/unit/prefix— headline number (e.g.$/871/K).deltaText+deltaVariant— Δ text and sentiment colour.targetText— target shown after the literal "tgt" prefix in the visible meta row, and reused as the "Target" row in the auto-generated popover.detailTitleText— popover title (setting this enables the auto-generated popover).previousValueText— "Previous" row in the auto-generated popover.deltaAbsoluteText— "Δ absolute" row in the auto-generated popover.
Delta sentiment variants
positive/negative/neutral— ordinary movement / no change.up-strong/down-strong— outlier positive / negative (deeper colours).