Hero — Headline with stats row

An asymmetric opening with a supporting note and four figures below a divider. Use it when measured results reinforce the main claim.

ReactHTML

1440 × 900

Open in new tab

Component.tsx41 lines

export default function HeroHeadlineStats() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="grid gap-10 lg:grid-cols-12 lg:items-end lg:gap-0">
          <div className="lg:col-span-8">
            <p className="text-sm font-medium text-neutral-500">Eyebrow for the main claim</p>
            <h1 className="mt-4 text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">Headline that puts the outcome first</h1>
            <p className="mt-6 max-w-xl text-lg text-pretty text-neutral-600">Supporting copy that connects the main promise to the figures and the next action.</p>
            <div className="mt-10 flex flex-wrap items-center gap-3">
              <a href="#" className="inline-flex h-11 items-center justify-center rounded-md px-5 text-sm font-medium transition-colors bg-neutral-900 text-white hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 ">Primary action</a>
              <a href="#" className="inline-flex h-11 items-center justify-center rounded-md px-5 text-sm font-medium transition-colors border border-neutral-300 bg-white text-neutral-900 hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 ">Secondary action</a>
            </div>
          </div>
          <aside className="border-l border-neutral-200 pl-6 lg:col-span-3 lg:col-start-10">
          <p className="text-base text-neutral-600">Supporting note that explains how the figures were measured. Add context that helps readers assess the claim.</p>
          <a href="#" className="mt-4 inline-block text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Read the context</a>
        </aside>
      </div>
      <dl className="mt-16 grid grid-cols-2 gap-8 border-t border-neutral-200 pt-8 lg:grid-cols-4">
        <div className="flex flex-col">
          <dt className="text-sm text-neutral-500">Audience or usage count</dt>
          <dd className="order-first mb-2 text-4xl font-semibold tracking-tight">1,284</dd>
        </div>
        <div className="flex flex-col">
          <dt className="text-sm text-neutral-500">Measured outcome</dt>
          <dd className="order-first mb-2 text-4xl font-semibold tracking-tight">98%</dd>
        </div>
        <div className="flex flex-col">
          <dt className="text-sm text-neutral-500">Typical response time</dt>
          <dd className="order-first mb-2 text-4xl font-semibold tracking-tight">24h</dd>
        </div>
        <div className="flex flex-col">
          <dt className="text-sm text-neutral-500">Range or coverage count</dt>
          <dd className="order-first mb-2 text-4xl font-semibold tracking-tight">32</dd>
        </div>
      </dl>
    </div>
  </section>
  )
}

Pattern notes

When to use: Use when a few measurable outcomes build confidence. Choose hero-media-band when imagery and caption facts carry the message. Variations: use two metrics, replace the side note with a quotation, or link each figure to its methodology.
Hierarchy: The display headline is 36px, 48px at 640px and 60px at 1024px, semibold with tracking-tight and balanced wrapping. Read eyebrow, h1, 18px lede, two actions, a 16px note and text link, then four 36px semibold figures and 14px labels. Slots: title 10 words, lede 25, note 35 total, link 3, each metric label 4, figures 6 characters.
Responsive: Below 1024px the note follows the action row after 40px and the metrics have two columns. At 1024px the intro becomes a 12-column grid and metrics become four columns. The title steps at 640px and 1024px; section padding at 640px.
Layout: A 1152px max-w-6xl container has 24px horizontal padding and 64px vertical padding, increasing to 96px at 640px. A 12-column intro at 1024px puts the main copy in an 8-column span and a bottom-aligned supporting note in columns 10–12. The note has a 1px left border and 24px left padding. After 64px a top divider and 32px padding introduce four equal metric columns with 32px gaps.
States: Actions are 44px tall with 20px horizontal padding and rounded-md 6px radii. Primary hover changes neutral-900 to neutral-700; secondary hover changes white to neutral-50. Colour transitions take 150ms. Every enabled control shows a 2px neutral-900 focus-visible outline offset 2px. The note link changes neutral-900 to neutral-600 on hover. Metrics are static; no selected or disabled state.

Desktop wireframe

┌──────────────────────────────────────────┬───────────────────┐
│ Eyebrow                                  │                   │
│ Headline for the main outcome            │ Supporting note   │
│ Supporting lede                          │ More context      │
│ [Primary action] [Secondary]             │ [Read more]       │
│                                          │                   │
├──────────────────────────────────────────┴───────────────────┤
│ 1,284           98%            24h            32             │
│ Audience        Outcome        Response       Coverage       │
└──────────────────────────────────────────────────────────────┘

View all

Hero — Announcement rail and wide pitch
Layout tags: sidebar,numbers,spacious
Hero — Bento tiles
Layout tags: bento,media,compact
Hero — Centred search bar
Layout tags: centered,form,row

Hero — Headline with stats row

Pattern notes

More in Hero

Hero — Announcement rail and wide pitch

Hero — Bento tiles

Hero — Centred search bar