Hero — Text over full-bleed media

A full-width media background with a dark scrim and centred white opening copy. Use it when the background image sets the context for the headline.

ReactHTML

1440 × 900

Open in new tab

Component.tsx23 lines

export default function HeroOverlayMedia() {
  return (
    <section className="relative isolate bg-neutral-950 text-white">
      <div role="img" aria-label="Image placeholder: full-width background photo" className="pointer-events-none absolute inset-0 flex items-center justify-center bg-neutral-100 text-neutral-400">
        <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 aria-hidden="true" className="pointer-events-none absolute inset-0 bg-neutral-950/70"></div>
      <div className="relative mx-auto flex min-h-[560px] max-w-3xl flex-col justify-center px-6 py-16 text-center sm:min-h-[640px] sm:py-24">
        <p className="text-sm font-medium text-neutral-300">Eyebrow that introduces the setting</p>
        <h1 className="mt-4 text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">Headline that sets the main direction</h1>
        <p className="mt-6 text-lg text-pretty text-neutral-300">Supporting copy that connects the background image to the main outcome and the next step.</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-white text-neutral-900 hover:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white ">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-white bg-transparent text-white hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white ">Secondary action</a>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when a single image carries the opening atmosphere. Choose hero-centered-media when a screenshot needs to remain unobscured. Variations: use a video placeholder, shorten to one action, or left-align the foreground column.
Hierarchy: The display headline is 36px, 48px at 640px and 60px at 1024px, semibold with tracking-tight and balanced wrapping. White title and 14px eyebrow sit over the media; the 18px lede is neutral-300. Slots: eyebrow 6 words, title 10, lede 25 and each action 3. The background is labelled as an image placeholder and the scrim is decorative.
Responsive: Below 640px the minimum height is 560px and actions stack full width. From 640px the section is at least 640px tall, uses 96px vertical padding and horizontal actions. The title follows 36px, 48px and 60px at 0px, 640px and 1024px.
Layout: A relative full-bleed section contains an inset-0 media placeholder and a neutral-950/70 scrim. The foreground uses a centered max-w-3xl 768px column, 24px side padding and 64px vertical padding. Its minimum height is 560px, increasing to 640px at 640px. Gaps are 16px, 24px and 40px before title, lede and actions.
States: Actions are 44px tall and rounded-md, with 150ms colour transitions. The white primary fills neutral-200 on hover; the outlined white secondary fills white/10. Both show a 2px white focus-visible outline offset 2px. Background layers are static and ignore pointer input.

Desktop wireframe

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

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 — Text over full-bleed media

Pattern notes

More in Hero

Hero — Announcement rail and wide pitch

Hero — Bento tiles

Hero — Centred search bar