stat grid

Stat / KPI grid

Horizontal row of metric tiles. The default for dashboard KPIs, summary tiles, and metric strips wherever multiple stat cards sit side-by-side.

Implementation

.stat-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
}
.stat-row::-webkit-scrollbar { display: none; }
.stat {
  flex-shrink: 0;
  min-width: 170px;
  scroll-snap-align: start;
}
.stat-val, .stat-lbl, .stat-trend { white-space: nowrap; }

Why scroll, not wrap

• Stat cards convey single comparable values. Wrapping breaks scanning.
• Horizontal scroll preserves the row metaphor and is familiar from native iOS/Android lists.
• Auto-snap-to-start ensures the first card resets after navigation.

Anatomy

• .stat-val — the number, weight 700/800, tracking -0.4
• .stat-lbl — the label, weight 500, color --text-2
• .stat-trend — optional ↑ / ↓ delta, color from semantic positive/negative