"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
Rate
- 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 gridLayout="2col".
Performance
Rate
- 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
- 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
- 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
- Current
- $871K
- Δ percent
- +15.8%
- Target
- $900K
- Current
- 5.7%
- Δ percent
- +1.2%
- Target
- 7.0%
Operations
- 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
- 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(--pc-border-color); each tile paints --pc-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 a cell-min-driven auto-fit grid. Pass gridLayout="2col" on KpiEditorial to force exactly 2 columns regardless of card width, or a gridLayout="max-N" cap (N = 2–6) to ceiling the column count while still collapsing
responsively below the cell-min × N threshold — useful when "1/3 of the page" varies
enough across viewport widths that auto-fit can't reliably catch the right bucket. Tune cellMinWidth to shift the collapse points. 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.gridLayout—2colormax-2…max-6grid modifier (default: cell-minauto-fit).cellMinWidth— CSS length for--pc-kpi-edit-cell-min(default14rem).
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).