Image band call to action

Use it when

An image running the full height of one half against a dark ask on the other, meeting at a hard edge. Closes a page that has been type-only without resorting to an overlaid banner.

Category

Calls to action

Layout archetype

Split screen

Page position

closing (derived)

Purpose

convert (derived)

Field

dark (derived)

Interaction

static (derived)

Motifs

Elevation frame, Quiet field

Content it requires

• A portrait or full-height image
• A short headline
• Two calls to action
• One reassurance line

Do not use it when

• The image carries no text and is not a background, which is why the ask stays legible whatever gets photographed. Do not overlay the copy to save space.
• Shares the split archetype with HRO-06. Never run both on the same page.
• The reverse prop mirrors the halves. Use it only to avoid two consecutive sections weighted to the same side.

Variants

reverse

Implementation

src/components/patterns/CtaImageBand.astro

---
import CtaImageBand from '../components/patterns/CtaImageBand.astro';
---

<CtaImageBand />

Import directly. Do not route production through patternComponents.

Production usage

Not yet used on a production page. Nothing here has been proven in front of a customer.

Accessibility

• Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
• No interactive controls beyond links and buttons inherited from the design system.
• Colour never carries meaning alone: every state marker is paired with text.
• Motion respects prefers-reduced-motion.