Hero — Centred with media below

A centred introduction and action pair above a wide screenshot and a logo row. Use it when a product overview and social proof should support the opening message.

ReactHTML

1440 × 900

Open in new tab

Component.tsx64 lines

export default function HeroCenteredMedia() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="mx-auto max-w-3xl text-center">
          <a href="#" className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Eyebrow or short announcement</a>
          <h1 className="mt-4 text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">Headline that names the main outcome</h1>
          <p className="mt-6 text-lg text-pretty text-neutral-600">Supporting copy that describes the audience and the main benefit in one or two sentences.</p>
          <div className="mt-10 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:justify-center">
            <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>
        <div role="img" aria-label="Image placeholder: product overview screenshot" className="mt-16 flex aspect-[4/3] items-center justify-center rounded-lg border border-neutral-200 bg-neutral-100 text-neutral-400 sm:aspect-video">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10">
            <rect x="3" y="3" width="18" height="18" rx="2" />
            <circle cx="9" cy="9" r="2" />
            <path d="m21 15-5-5L5 21" />
          </svg>
        </div>
        <div className="mt-12 text-center">
          <p className="text-sm text-neutral-500">A short label introducing supporting organizations</p>
          <ul role="list" aria-label="Organization logo placeholders" className="mx-auto mt-6 grid max-w-3xl grid-cols-6 gap-6 sm:grid-cols-5">
            <li className="col-span-2 flex items-center justify-center gap-2 text-neutral-600 sm:col-span-1">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-6">
                <path d="m12 3 9 9-9 9-9-9 9-9Z" />
                <path d="m8 12 4-4 4 4-4 4-4-4Z" />
              </svg>
              <span className="font-semibold">Logo</span>
            </li>
            <li className="col-span-2 flex items-center justify-center gap-2 text-neutral-600 sm:col-span-1">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-6">
                <path d="m12 3 9 9-9 9-9-9 9-9Z" />
                <path d="m8 12 4-4 4 4-4 4-4-4Z" />
              </svg>
              <span className="font-semibold">Logo</span>
            </li>
            <li className="col-span-2 flex items-center justify-center gap-2 text-neutral-600 sm:col-span-1">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-6">
                <path d="m12 3 9 9-9 9-9-9 9-9Z" />
                <path d="m8 12 4-4 4 4-4 4-4-4Z" />
              </svg>
              <span className="font-semibold">Logo</span>
            </li>
            <li className="col-span-2 flex items-center justify-center gap-2 text-neutral-600 sm:col-span-1 col-start-2 sm:col-start-auto">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-6">
                <path d="m12 3 9 9-9 9-9-9 9-9Z" />
                <path d="m8 12 4-4 4 4-4 4-4-4Z" />
              </svg>
              <span className="font-semibold">Logo</span>
            </li>
            <li className="col-span-2 flex items-center justify-center gap-2 text-neutral-600 sm:col-span-1 col-start-4 sm:col-start-auto">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-6">
                <path d="m12 3 9 9-9 9-9-9 9-9Z" />
                <path d="m8 12 4-4 4 4-4 4-4-4Z" />
              </svg>
              <span className="font-semibold">Logo</span>
            </li>
          </ul>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for an opening product overview with visual proof. Choose hero-centered-form when collecting an email is the main task. Variations: replace the screenshot with a video placeholder, use three logos, or replace the proof label with a short caption.
Hierarchy: The display headline is 36px, 48px at 640px and 60px at 1024px, semibold with tracking-tight and balanced wrapping. Read the linked 12px badge eyebrow, h1, 18px lede, actions, screenshot and 14px proof label. Slots: eyebrow 5 words, headline 10, lede 30, actions 3 each, proof label 8. Logo placeholders combine a 24px glyph and the word Logo.
Responsive: Below 640px actions stack at full width and the media is 4:3. At 640px actions form a centered row and media becomes 16:9. Logos use a three-column grid below 640px and five columns above, with the final two centered in the mobile row. Container padding and headline sizes follow the section and display steps.
Layout: A 1152px max-w-6xl container has 24px horizontal padding and 64px vertical padding, increasing to 96px at 640px. The centered text is max-w-3xl 768px with a 16px eyebrow-to-title gap, 24px to the lede, and 40px to actions. A bordered rounded-lg media placeholder follows after 64px. A proof label and five logo placeholders follow 48px lower, with 24px row 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 eyebrow badge fills neutral-50 on hover. Media and logos are static.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│                        [Eyebrow link]                        │
│                Headline for the main outcome                 │
│                       Supporting lede                        │
│                 [Primary action] [Secondary]                 │
│                                                              │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │                          Image                           │ │
│ └──────────────────────────────────────────────────────────┘ │
│                                                              │
│                    Supporting meta label                     │
│             Logo    Logo    Logo    Logo    Logo             │
└──────────────────────────────────────────────────────────────┘

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 — Centred with media below

Pattern notes

More in Hero

Hero — Announcement rail and wide pitch

Hero — Bento tiles

Hero — Centred search bar