Magazine-cover restraint — light-weight numerals, generous space, hairline rules between cells.
No charts, no pills — the design's identity is the thin numeral. Default layout is a cell-min
auto-fit grid; is_2_columns forces 2; grid_layout="max_N"
caps at N.
Executive snapshot · auto-fit (default)
LIVE- Current
- $847K
- Previous
- $748K
- Δ percent
- +13.3%
- Target
- $900K
is_2_columns — force exactly 2 columns
Two-up
- Current
- $847K
- Previous
- $748K
- Δ percent
- +13.3%
- Target
- $900K
grid_layout="max_3" — cap at 3 columns
Tiles never exceed 3 columns even on a wide container, but still collapse below the cell-min × 3 threshold.
Three-up
- Current
- $847K
- Previous
- $748K
- Δ percent
- +13.3%
- Target
- $900K
cell_min_width="18rem" — wider cells, fewer columns
Wide cells
- Current
- $847K
- Previous
- $748K
- Δ percent
- +13.3%
- Target
- $900K
1×3 · .pa-col-1-3 columns
Each card holds 4 tiles in 2 columns. Tests how the extra-light numerals scale at narrow widths via the per-tile container query.
- Current
- $847K
- Previous
- $748K
- Δ percent
- +13.3%
- Target
- $900K
- Current
- $847K
- Previous
- $748K
- Δ percent
- +13.3%
- Target
- $900K
- Current
- $847K
- Previous
- $748K
- Δ percent
- +13.3%
- Target
- $900K
Usage Guide
When to use
Executive / weekly-review pages where the operator wants "how are we doing" at a glance and reads the supporting context only on hover. Best for printed-style pages, dashboard headers, all-hands deck-style summaries. For per-tile depth see Terminal grid; for goal-oriented bars see Comparison gauges.
Hairline rules
Dividers are gap: 1px over background: var(--pa-border-color), with each
tile painting background: var(--pa-card-bg) on top. The gap shows through, giving
single-pixel hairlines on every interior boundary regardless of column count.
Extra-light numerals
The value uses var(--base-font-family) at font-weight: 200 — explicitly
NOT mono. Mono fonts rarely ship a true extra-light weight; using the body sans gives proper thin
glyphs that read as "editorial" rather than "monospace at low contrast". Tabular numerals
preserved via font-variant-numeric: tabular-nums.
Layout modifiers
Default is a cell-min-driven auto-fit grid: cells stay at least
cell_min_width wide (default upstream 14rem), the grid fits as many
columns as the container allows. is_2_columns forces exactly 2 columns;
grid_layout="max_N" caps the column count while still collapsing responsively.
Per-tile container query
Each tile is its own container-type: inline-size so the value's cqi-based
font-size scales with the tile's actual width — keeps typography legible as the grid packs more
cells into the same row.
Meta row
Optional delta_text + target_text. The target_text is
auto-rendered as <em>tgt</em> {value}. Pass a :meta slot
for fully-custom markup.
CSS Classes Reference
Card structure
pa-kpi-edit— page-namespace class on.pa-card.pa-kpi-edit__body—padding: 0so hairlines reach the card edges.pa-kpi-edit__grid— cell-min auto-fit grid.
Grid layout modifiers
pa-kpi-edit__grid--2col— force exactly 2 columns.pa-kpi-edit__grid--max-2/--max-3/--max-4/--max-5/--max-6— cap column count.
Layout CSS variables
--pa-kpi-edit-cell-min— min cell width for auto-fit (default14rem).
Tile
pa-kpi-edit__tile— single cell. Per-tile container query host.pa-kpi-edit__label— uppercase mono caption.pa-kpi-edit__value— extra-light focal number.pa-kpi-edit__num/pa-kpi-edit__unit.pa-kpi-edit__meta— delta + target row.pa-kpi-edit__delta--positive/--negative/--neutral/--up-strong/--down-strong.pa-kpi-edit__target— wraps the "tgt {value}" meta cell.