Goal-oriented progress bars: each KPI shows label · value on top, a bar with target tick in the
middle, and a 0 · tgt scale below. Bar fill is value / target × 100% — colour
signals overshoot/undershoot. Grid is a cell-min-driven auto-fit layout (no media
queries).
Quarterly targets
LIVE- Current
- 88.6%
- Previous
- 84.2%
- Δ percent
- +5.2%
- Target
- 90.0%
- Current
- $835K
- Previous
- $752K
- Δ percent
- +11.0%
- Target
- $900K
- Current
- 23.8°C
- Target
- 25.0°C
- Current
- 84.5%
- Target
- ≤ 80%
- Current
- 0.27%
- Target
- ≤ 0.50%
- Current
- ¥11.7M
- Target
- ¥13.0M
1×3 · .pa-col-1-3 columns, each card --2col
Each card carries two gauges in a deterministic 2-col grid. Useful at moderate viewport widths where auto-fit would still pack only 1 col per card.
- Current
- 88.6%
- Previous
- 84.2%
- Δ percent
- +5.2%
- Target
- 90.0%
- Current
- $835K
- Previous
- $752K
- Δ percent
- +11.0%
- Target
- $900K
- Current
- 23.8°C
- Target
- 25.0°C
- Current
- 84.5%
- Target
- ≤ 80%
- Current
- 0.27%
- Target
- ≤ 0.50%
- Current
- ¥11.7M
- Target
- ¥13.0M
Asymmetric · .pa-col-25 + .pa-col-45 + .pa-col-30
Mixed-width cells: narrow 25% uses cell_min_width="16rem" to keep 1 col; the mid 45%
auto-fits 2 cols; the 30% caps at 2 columns via --max-2.
- Current
- 88.6%
- Previous
- 84.2%
- Δ percent
- +5.2%
- Target
- 90.0%
- Current
- $835K
- Previous
- $752K
- Δ percent
- +11.0%
- Target
- $900K
- Current
- 23.8°C
- Target
- 25.0°C
- Current
- 88.6%
- Previous
- 84.2%
- Δ percent
- +5.2%
- Target
- 90.0%
- Current
- $835K
- Previous
- $752K
- Δ percent
- +11.0%
- Target
- $900K
- Current
- 23.8°C
- Target
- 25.0°C
- Current
- 84.5%
- Target
- ≤ 80%
- Current
- 88.6%
- Previous
- 84.2%
- Δ percent
- +5.2%
- Target
- 90.0%
- Current
- $835K
- Previous
- $752K
- Δ percent
- +11.0%
- Target
- $900K
Usage Guide
When to use
Goal-oriented dashboards — each KPI is shown as a progress bar against a target. Best when the operator's mental model is "are we on track?" rather than "what's the trend?". For trend-first reads, see Sparkline list or Terminal grid; for purely textual scanning, see Numeric strip.
Bar semantics — two modes
Default mode (0 → target scale): the bar's full width represents the target.
Fill width = value / target, capped at 100%. Tick sits at the right edge. Overshoots
are signalled by the warning colour rather than overflow.
0 → max scale (override tick_position): bar's full width represents
some wider scale (e.g. 0–100% capacity). Tick slides inside the bar to mark the target. Overshoots
become visible as fill extending past the tick. See "Server Capacity" in the canonical card.
Sentiment colours
- positive (green) — on track / approaching target.
- warning (orange) — off-target or approaching a limit.
- negative (red) — actively bad / failing target.
- neutral (grey) — informational, no strong sentiment.
Layout
Default kpi_gauge_list is a cell-min-driven auto-fit grid: cells stay
at least cell_min_width wide (default upstream 20rem), the grid fits as
many columns as the container allows. grid_layout="max_N" caps the column count;
grid_layout="2col" forces exactly 2.
Hairline dividers
Dividers are gap: 1px over background: var(--pa-border-color); each
tile paints background: var(--pa-card-bg) on top. The gap shows through, giving
single-pixel hairlines on every interior boundary regardless of column count.
CSS Classes Reference
Card structure
pa-kpi-gauge-list— page-namespace class on.pa-card.pa-kpi-gauge-list__body—padding: 0so hairlines reach the card edges.pa-kpi-gauge-list__grid— cell-min auto-fit grid.
Grid layout modifiers
pa-kpi-gauge-list__grid--2col— force exactly 2 columns.pa-kpi-gauge-list__grid--max-2/--max-3/--max-4/--max-5/--max-6— cap column count.
Layout CSS variables
--pa-kpi-gauge-cell-min— min cell width for auto-fit (default20rem).
Gauge tile
pa-kpi-gauge— single gauge cell. Carries--pa-kpi-bar-color.pa-kpi-gauge--positive/--warning/--negative/--neutral.pa-kpi-gauge__head/__label/__value/__num/__unit/__scale.pa-kpi-gauge__bar/__fill— track + fill (width inline).
Bar tick CSS variables
--pa-kpi-gauge-tick-pos— target tick position (default100%).--pa-kpi-gauge-tick-color— tick colour (defaultvar(--pa-text-color-1)).