Library · Content Sections

Stats Band

Credibility "by the numbers" band — a responsive row of big-number stat tiles (value + label), optional heading, optional count-up-on-scroll. Big Fraunces numerals + Archivo labels. Tone via the shared contract. Net-new component (no legacy/Plum equivalent).

Figma: Stats Band ↗
Default 
---
import StatsBand from "../components/figma/StatsBand.astro";
const stats = [
  { value: "$5B+", label: "In property sales" },
  { value: "15+", label: "Years in property" },
  { value: "5,000+", label: "Properties sold" },
  { value: "98%", label: "Of asking achieved" },
];
---
<StatsBand
  eyebrow="Why Company XYZ"
  title="Results that speak for themselves"
  stats={stats}
  tone="primary"
/>
No Heading 
---
import StatsBand from "../components/figma/StatsBand.astro";
const stats = [
  { value: "$5B+", label: "In property sales" },
  { value: "1,000+", label: "Homes sold" },
  { value: "98%", label: "Of asking achieved" },
  { value: "4.9", label: "Average client rating" },
];
---
<StatsBand stats={stats} tone="base-200" />
Three 
---
import StatsBand from "../components/figma/StatsBand.astro";
const stats = [
  { value: "15+", label: "Years in property" },
  { value: "5,000+", label: "Properties sold" },
  { value: "98%", label: "Of asking achieved" },
];
---
<StatsBand title="Three that count" stats={stats} countUp={false} tone="neutral" />

Props

NameTypeRequiredDescription
stats Stat[] Yes The stats to display (2–4 read best)
title string — Optional heading above the stats
eyebrow string — Optional small-caps line above the heading
level 'h2' | 'h3' — Semantic heading level (visual style stays H3 — H2 reads too big at section scale; see the component-conventions skill) (default: 'h2')
countUp boolean — Animate the numbers counting up when scrolled into view (default: true)
tone "base-100" | "base-200" | "base-300" | "primary" | "secondary" | "neutral" — Background tone — the Figma colour-variant axis
stats[] { value, label }[] Yes The stat tiles — value (e.g. "$5B+") + short label.

Example with all props

<StatsBand
  eyebrow="Why Company XYZ"
  title="Results that speak for themselves"
  stats={[
    { value: "$5B+", label: "In property sales" },
    { value: "15+", label: "Years in property" },
    { value: "5,000+", label: "Properties sold" },
    { value: "98%", label: "Of asking achieved" },
  ]}
  countUp
  tone="primary"
/>