Call to action — Detail card over media

A full-width media backdrop with left-aligned invitation copy and a white details card. Use it when readers need practical details before choosing an action.

ReactHTML

1440 × 900

Open in new tab

Component.tsx37 lines

export default function CtaOverlayMedia() {
  return (
    <section className="relative isolate bg-neutral-950 text-white">
      <div role="img" aria-label="Image placeholder: full-width invitation background" 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 grid max-w-6xl gap-12 px-6 py-16 sm:py-24 lg:grid-cols-12 lg:items-end">
        <div className="lg:col-span-7">
          <h2 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">Heading that invites a clear next step</h2>
          <p className="mt-6 max-w-lg text-lg text-pretty text-neutral-300">Supporting copy that explains the invitation and why the practical details matter.</p>
        </div>
        <div className="rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 lg:col-span-5">
          <dl>
            <div className="flex flex-wrap items-baseline justify-between gap-4 border-b border-neutral-200 py-4">
              <dt className="text-sm text-neutral-600">Date</dt>
              <dd className="text-sm font-medium"><time dateTime="2027-03-14">Mar 14, 2027</time></dd>
            </div>
            <div className="flex flex-wrap items-baseline justify-between gap-4 border-b border-neutral-200 py-4">
              <dt className="text-sm text-neutral-600">Duration</dt>
              <dd className="text-sm font-medium">90 minutes</dd>
            </div>
            <div className="flex flex-wrap items-baseline justify-between gap-4 border-b border-neutral-200 py-4">
              <dt className="text-sm text-neutral-600">Price</dt>
              <dd className="text-sm font-medium">$29</dd>
            </div>
          </dl>
          <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 mt-6 w-full">Reserve a place</a>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a visual invitation with a date, duration or cost to confirm. Choose cta-detail-card when the dated details need a plain surface, or hero-overlay-media for centered opening copy without a details card. Variations: replace the three facts with availability, use a video backdrop, or add a short card title.
Hierarchy: The left h2 is 36px, rising to 48px at 640px, with an 18px neutral-300 lede after 24px. The card uses 14px neutral-600 terms and neutral-900 medium values. Slots: heading 8 words, lede 25, terms 3, values 4, action 3. Copy leads into details and action.
Responsive: Below 1024px the card follows the copy with a 48px gap and full available width. At 1024px copy and card use 7/5 column spans. At 640px vertical padding increases from 64px to 96px and the heading grows from 36px to 48px. Detail values wrap within their row.
Layout: A relative full-bleed section layers an inset-0 media placeholder, neutral-950/70 scrim and a standard 1152px padded container. At 1024px a 12-column grid with 48px gap aligns white copy across seven columns and a white rounded-lg bordered card across five columns to the bottom. The card has 24px padding, three dl rows with 16px vertical padding and dividers, and a full-width action 24px lower.
States: Actions are 44px tall with 20px horizontal padding and rounded-md 6px radii. Primary hover changes neutral-900 to neutral-700. Colour transitions take 150ms. Every enabled control shows a 2px neutral-900 focus-visible outline offset 2px. Background and scrim ignore pointer input. The white detail card is static.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────────┐ │
│ │                         Image                            │ │
│ │                                                          │ │
│ │ Heading for the next step        ┌─────────────────────┐ │ │
│ │ Supporting lede                  │ Label         Value │ │ │
│ │                                  │ Label         Value │ │ │
│ │                                  │ Label         Value │ │ │
│ │                                  │ [Primary action]    │ │ │
│ │                                  └─────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘

View all

Call to action — Audience choice cards
Layout tags: split,list,spacious
Call to action — Card with image
Layout tags: split,media
Call to action — Centred with actions
Layout tags: centered,stacked,spacious

Call to action — Detail card over media

Pattern notes

More in Call to action

Call to action — Audience choice cards

Call to action — Card with image

Call to action — Centred with actions