Studiov1.2.3
Studio/Patterns/Stats Bar

Stats Bar

Content

Horizontal row of 3-5 key metrics with labels. Typically placed below a hero or at the top of a dashboard. Each stat shows a number and descriptor.

All patterns
8-20%
Metric
$1.12B
Metric
5
Metric
Dual
Metric
Use Cases
  • Portfolio summary metrics
  • Campaign performance KPIs
  • Project dashboard header
  • Landing page social proof (fund size, IRR, projects)
Do
  • Keep to 3-5 metrics maximum
  • Use consistent number formatting
  • Add trend indicators where appropriate
  • Use dividers between stats for visual separation
Avoid
  • Show more than 5 stats in one bar
  • Mix currencies and percentages without labels
  • Use small text for the primary number
  • Wrap stats to multiple rows (reduce count instead)
Reference component: StatsBarVariants: 2Token bindings: 5