Hero — Editorial headline and paired media

A broad headline leads an unequal image pair with the lede and action in a narrow upper column.

ReactHTML

1440 × 900

Component.tsx74 lines

export default function HeroEditorialDualMedia() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <p className="text-sm font-medium text-neutral-500">Opening label</p>
        <div className="mt-4 grid gap-6 lg:grid-cols-[2fr_1fr]">
          <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl">
            Headline that names the main outcome
          </h1>
          <div className="space-y-6">
            <p className="text-lg text-pretty text-neutral-600">
              A short lede that explains the audience and the outcome.
            </p>
            <div className="flex flex-wrap items-center gap-3">
              <a
                href="#"
                className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Primary action
              </a>
            </div>
          </div>
        </div>
        <div className="mt-12 grid items-end gap-6 sm:grid-cols-[2fr_1fr]">
          <div
            role="img"
            aria-label="Image placeholder: primary product view"
            className="flex aspect-[4/3] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400 sm:aspect-[16/9]"
          >
            <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>
          <figure className="space-y-3">
            <div
              role="img"
              aria-label="Image placeholder: supporting detail"
              className="flex aspect-[4/3] items-center justify-center rounded-lg 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>
            <figcaption className="text-sm text-neutral-500">
              Caption describing the supporting detail
            </figcaption>
          </figure>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when an overview image and a detail image both matter. Pick a single split image for one visual. Variations: reverse image weights, use a video in the wide slot, or replace the detail caption with a brief attribution.
Hierarchy: Read the 36px to 60px headline first, then the 18px lede and primary action, followed by the large image and detail caption. Limit the headline to 10 words, lede to 25 and caption to 12.
Responsive: Both grids stack below their breakpoints. The primary image changes from 4:3 to 16:9 at 640px; the supporting image stays 4:3. The headline steps at 640px and 1024px.
Layout: A max-w-6xl container uses 24px side padding and 64px vertical padding, increasing to 96px at 640px. The upper grid becomes 2:1 at 1024px; the lower image pair becomes 2:1 at 640px with 24px gaps and bottom alignment.
States: Links and buttons use neutral hover states and a 2px keyboard focus outline offset by 2px. Filled actions lighten from neutral-900 to neutral-700; outlined actions fill neutral-50. Informational regions remain static.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│Eyebrow                                                   │
│Headline for the main outcome      Lede                   │
│                                   [Primary action]       │
│                                                          │
│┌──────────────────────────────────┐   ┌────────────────┐ │
││                                  │   │Image           │ │
││Image                             │   │Caption         │ │
││                                  │   └────────────────┘ │
│└──────────────────────────────────┘                      │
└──────────────────────────────────────────────────────────┘

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 — Editorial headline and paired media

Pattern notes

More in Hero

Hero — Announcement rail and wide pitch

Hero — Bento tiles

Hero — Centred search bar