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

​
heading
string
Optional centred section heading above the stats grid, rendered at 2xl–3xl.
​
stats
StatItem[]
required
Array of stat objects. At least one stat is required. Rendered as four evenly-spaced columns.
​
backgroundVariant
'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).
​
spacing
'none' | 'small' | 'default' | 'large'
Vertical padding override. Defaults to default. The section uses size="sm" internally, so padding is already compact.
​
maxWidth
'narrow' | 'default' | 'full'
Content container max-width. Defaults to default.
​
class
string
Additional CSS classes.
​
id
string
HTML id for anchor targeting.

​
StatItem fields

Each entry in stats is a statItem object: 
{
  value: string;        // required — e.g. "50+", "$2M", "98%"
  label: string;        // required — small-caps descriptor below the value
  description?: string; // optional longer description (not currently rendered in this block)
}

​
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:
backgroundVariantBackgroundTextBorder
white / light / primarybg-mutedforegroundborder-border
darkbg-foregroundtext-backgroundborder-foreground

​
Example

{
  _type: 'statsRow',
  heading: 'Program Impact',
  backgroundVariant: 'dark',
  stats: [
    { value: '200+', label: 'Students' },
    { value: '50+',  label: 'Industry Partners' },
    { value: '98%',  label: 'Placement Rate' },
    { value: '$2M',  label: 'In Scholarships' }
  ]
}

Build docs developers (and LLMs) love

Get started for freeTalk to us