Call to action — Card with image

An inset panel with an edge-to-edge image on the left and action copy plus a detail footer on the right. Use it when an offer benefits from a visual and one extra decision detail.

ReactHTML

1440 × 900

Open in new tab

Component.tsx30 lines

export default function CtaSplitImage() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="overflow-hidden rounded-lg bg-neutral-50 lg:grid lg:grid-cols-2">
          <div role="img" aria-label="Image placeholder: image that supports the offer" className="flex aspect-[4/3] items-center justify-center bg-neutral-100 text-neutral-400 sm:aspect-video lg:aspect-auto">
            <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="p-6 lg:p-12">
            <p className="text-sm font-medium text-neutral-500">Eyebrow for the featured invitation</p>
            <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading that introduces the next opportunity</h2>
            <p className="mt-6 text-lg text-pretty text-neutral-600">Supporting copy that connects the image to the offer and explains who the next step is for.</p>
            <div className="mt-8 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 className="mt-8 flex flex-wrap items-center justify-between gap-4 border-t border-neutral-200 pt-6">
              <p className="text-base font-medium">Starting at $29</p>
              <a href="#" className="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 details</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a visual offer with a price or practical footer detail. Choose hero-split-image for an opening with free-standing columns. Variations: replace the price with a date, use video media, or make the footer link a details link.
Hierarchy: The section headline is 30px, increasing to 36px at 640px, semibold with tracking-tight and balanced wrapping. Read media, 14px eyebrow, h2, 18px lede, actions and the detail footer. Slots: eyebrow 5 words, title 8, lede 25, actions 3, detail 5, footer link 3. The footer has a 16px medium value and a 14px link.
Responsive: Below 1024px the image sits above the copy, at 16:9 from 640px and 4:3 below it. The copy uses 24px padding below 1024px. At 1024px the media fills the left half without a fixed aspect and copy padding increases to 48px. Actions and footer wrap when needed.
Layout: A 1152px max-w-6xl container has 24px horizontal padding and 64px vertical padding, increasing to 96px at 640px. A rounded-lg neutral-50 panel clips its two halves. At 1024px two equal columns place an unpadded, full-height media region left and a 48px-padded content region right. The copy uses 16px before title, 24px before lede and 32px before actions. A border-t meta row follows after 32px with 24px top padding and 16px gap.
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 footer link changes neutral-900 to neutral-600 on hover. The media is static; focus rings remain inside the padded content region.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ ┌─────────────────────────┬────────────────────────────────┐ │
│ │                         │Eyebrow                         │ │
│ │                         │Heading for the next step       │ │
│ │          Image          │Supporting lede                 │ │
│ │                         │[Primary] [Secondary]           │ │
│ │                         ├────────────────────────────────┤ │
│ │                         │Detail value     [Read more]    │ │
│ └─────────────────────────┴────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘

View all

Call to action — Audience choice cards
Layout tags: split,list,spacious
Call to action — Centred with actions
Layout tags: centered,stacked,spacious
Call to action — Contact form
Layout tags: split,form

Call to action — Card with image

Pattern notes

More in Call to action

Call to action — Audience choice cards

Call to action — Centred with actions

Call to action — Contact form