Component

Stats Section

Full-width metrics bar — large Cal Sans values, Geist Mono uppercase labels, hairline dividers between items. Supports 1–6 stats, optional eyebrow, and optional section headline.

Preview

44 million
Transactions every 24 hours: $119 trillion
Assets under holding: 46,000
New users annually

With eyebrow + headline

By the numbers

Scale that matters

44 million
Transactions every 24 hours: $119 trillion
Assets under holding: 46,000
New users annually

Column counts

Stats render as a single responsive grid. The column count matches the number of stats (max 4 above lg). Below lg, items stack vertically with horizontal dividers between them.

StatsDesktop layout

11-col — centered

22-col — 50/50

33-col — 33/33/33

44-col — 25 each

5–64-col max — wraps to second row

Sanity fields

Available as statsSection in the Page builder. Add 1–6 stat items. Eyebrow and headline are optional.

Prop	Type	Default	Description
eyebrow	string	—	Small mono-caps label above the headline — e.g. "By the numbers".
headline	string	—	Optional Cal Sans section headline above the stats row.
stats	statItem[]	—	Array of 1–6 stat items. Required.
stats[].value	string	—	The large metric — e.g. "44 million", "$2.4B". Rendered in Cal Sans.
stats[].label	string	—	Short descriptor below the value — rendered in Geist Mono caps.

Usage

tsx

import { StatsSection } from '@/components/sections/stats-section'

<StatsSection
  block={{
    _type: 'statsSection',
    eyebrow: 'By the numbers',
    headline: 'Scale that matters',
    stats: [
      { value: '44 million',    label: 'Transactions every 24 hours' },
      { value: '$119 trillion', label: 'Assets under holding' },
      { value: '46,000',        label: 'New users annually' },
    ],
  }}
/>

tsx

// Via Sanity BlockRenderer — no extra code needed.
// Add to a Page document in Studio:
// Sections → Add item → Stats Section