Skip to main content
The StatsRow block renders a compact, high-contrast row of statistics — typically program metrics like student count, sponsor count, or placement rate. Stats are displayed in a 2×4 responsive grid (two columns on mobile, four on md+) with oversized numerals and small-caps labels.

​
Props

​
string
Optional centred section heading above the stats grid, rendered at 2xl–3xl.
​
StatItem[]
required
Array of stat objects. At least one stat is required. Rendered as four evenly-spaced columns.
​
'white' | 'light' | 'dark' | 'primary'
Only dark is treated specially: the section uses bg-foreground text-background with a matching border. All other values use bg-muted with a border-border rule. Defaults to white (renders as the muted/light style).
​
'none' | 'small' | 'default' | 'large'
Vertical padding override. Defaults to default. The section uses size="sm" internally, so padding is already compact.
​
'narrow' | 'default' | 'full'
Content container max-width. Defaults to default.
​
string
Additional CSS classes.
​
string
HTML id for anchor targeting.

​
StatItem fields

Each entry in stats is a statItem object:

​
Usage in Sanity Studio

  1. Add a Stats Row block to a page.
  2. Add an optional Heading.
  3. In Stats, click Add item for each metric:
    • Value: the large display number or string (e.g. "200+").
    • Label: the short descriptor (e.g. "Students Placed").
  4. Expand Layout Options and set Background Variant to dark for a reversed colour scheme.
Keep stat values short — they render at 4xl–6xl and long strings will break the layout on smaller viewports. Values like "$2M", "50+", or "98%" work best.

​
Variants / Options

No variant field. The only visual toggle is backgroundVariant:

​
Example