Stat and metric display components.

Basic Stats

1,234
Total Users
$12,345
Revenue
567
Orders
89%
Satisfaction

Stats with Trends

$847,392
Total Revenue
+12.5%
24,583
Active Users
-5.2%
3.47%
Conversion Rate
0%

Stats with Icons

Hero Stats

Total Revenue
$847,392
+12.5%
Active Users
24,583
-5.2%
Conversion Rate
3.47%
0%

5-step sentiment scale · v2.7.0

The hero delta scale grew from 3 (positive / negative / neutral) to 5 with the addition of very_positive and very_negative for outlier deltas. Neutral colour shifted from --pa-text-color-2 (grey) to --pa-neutral. Compare the five deltas side-by-side below.

ARR
$12.4M
+38.1% breakout
MRR
$847K
+12.5%
Latency p95
148 ms
±0.7%
Churn
2.4%
-5.2%
Cloud Spend
$103K
-38% collapse

Square Stats

42
Tasks
18
%
Completed
7
Pending
3
Failed

Square stats — mixed units · v2.6.0

v2.6.0 redesigned pa-stat--square so the decorative __symbol watermark sits inline with the big __number. Markup order alone drives visual order — pass is_prefix_symbol to render the symbol BEFORE the number for prefix currencies ($847K, ¥12.4M); leave it off for suffix units (87%, 23°C). Number font-size scales with the tile width via cqi (container-query inline-size), so a row of squares stays balanced regardless of grid breakpoint.

87
%
Completion
23
°C
Server temp
$
847K
MRR
¥
12.4M
JPY revenue

Square stats — fit-to-box + progressive disclosure · v2.9.0-rc04

Opt into fit mode with is_fit on a variant="square" stat. It emits data-pa-stat-fit and wires the PureAdminStatFit hook (pa-stat-fit.js). The primary __number is sized to fill the tile at the largest font that still fits — never overflows, independent of character count (a pure-CSS cqi clamp can't guarantee that). A priority ladder reveals rows as the tile earns both width and height: __number (P0) → __symbol (P1) → __label (P2) → __change (P3) → __context (P4). Fit mode requires a height source on the tile (each tile below sets an explicit height).

Priority ladder — same content, growing box

Watch the tiers appear as each tile gets taller / wider. Smallest shows the number only; the largest reveals all five rows. The number always fits and stays maxed.

$
847K
Monthly Revenue
12.5% vs last month
Updated 2 min ago
$
847K
Monthly Revenue
12.5% vs last month
Updated 2 min ago
$
847K
Monthly Revenue
12.5% vs last month
Updated 2 min ago
$
847K
Monthly Revenue
12.5% vs last month
Updated 2 min ago
$
847K
Monthly Revenue
12.5% vs last month
Updated 2 min ago

Char-count independence — same box, different numbers

All four tiles are the same size. Each number fills its box at the max font that fits, whatever the character count.

1
Res Version
92
Contracts
$
847K
Revenue
¥
12.4M
Tokyo Office

Wide banner layout (pa-stat--fit-wide)

Once a fit tile is ≥ 32rem wide, pa-stat-fit.js toggles the pa-stat--fit-wide class and the tile flips to a horizontal banner — the number fills the left, the metadata stacks in a column to its right. This full-width tile is wide enough to trigger it; the narrow one above stacks vertically.

Stat Cards

John Doe

Administrator

Settings

Sidebar
Display
Profile Panel
Body text size. All elements scale proportionally.