Single Headline Figure

Stats71: Single Headline Figure

A results section that commits to one enormous light figure, reads it back as a statement under a hairline, qualifies it with three smaller footnotes and closes on a captioned full-bleed photograph.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/stats71?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/stats71?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/stats71.tsx plus the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

The installed file exports stats71Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Stats71, stats71Demo } from "@/components/beste/block/stats71";

export default function ImpactPage() {
  return <Stats71 {...stats71Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Stats71 } from "@/components/beste/block/stats71";

export default function ImpactPage() {
  return (
    <Stats71
      badge={{ label: "One number" }}
      figure="11,340"
      figureLabel="hours handed back to clinical work last year"
      statement="That is five and a half full-time clinicians, recovered from admin nobody wanted to do"
      description="It is the only figure on this page because it is the one that matters."
      image={{ src: "/clinic/reception.jpg", alt: "A clinician in a bright clinic" }}
      caption="Counted as clinical room hours released from administrative blocks in 2025."
      footnotes={[
        { value: "11 hrs", label: "recovered per site each week, on median" },
        { value: "118", label: "practices included in the count" },
        { value: "60 days", label: "of each practice excluded while they settled" },
      ]}
      button={{ label: "Read how we counted it", href: "/method" }}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type BandImage = {
  src: string;
  alt: string;
};

type Footnote = {
  value: string;
  label: string;
};

Behavior notes

• The figure runs from text-6xl up to lg:text-9xl, the largest type anywhere in the set. It is a p, not a heading: statement is the h2, so the document outline carries the sentence rather than the number.
• statement is written as an interpretation rather than a repetition, translating the figure into something a reader can picture. That is the block's whole method.
• The third footnote in the demo states an exclusion rather than an achievement, which is what stops the qualifying row reading as three more boasts.
• The container is opened and closed twice: the copy sits in a max-w-7xl wrapper and the photograph is a direct child of the section so it runs edge to edge. The section carries pt-16 only, with the bottom padding on the footnotes row.
• The caption sits inside its own max-w-7xl wrapper with matching padding, so it aligns with the text above even though the photograph does not.
• The photograph is a real figure with a figcaption.
• Both the figure and the footnote values use tabular-nums.