Home / Snippets / UI Components /

Stat row

Dashboard chips: big numerals, delta pills, and short captions in a responsive grid.

28.4k

+12.3%

Unique visitors

3.8%

−0.4%

Bounce rate

1m 42s

+6s

Avg. session

Widely Supported

uino-js

Quick implementation

.stat-row-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.75rem;
}
.sr-value {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
}

Prompt this to your LLM

tabular-nums for stable numbers.

Implement KPI stat cards.

Use .stat-row-demo, .stat-row-card, .sr-stat blocks.
Each: .sr-value, .sr-delta with --up/--down modifiers, .sr-label.
Responsive auto-fit grid.

Return HTML + CSS.

Why this matters in 2026

Embedded analytics panels need to compress dense numbers without sparklines; deltas answer “is this good?” at a glance.

The logic

auto-fit minmax keeps three columns on desktop and stacks on narrow viewports.

Accessibility & performance

role="group" with aria-label summarises the strip; ensure deltas repeat direction in text when color is the only cue (add visually hidden text in production).