Overlap plate hero

Use it when

The first hero that gives a photograph the full width of the page. Headline sits on the page surface above the plate, and an ink panel breaks the plate corner so the two layers genuinely intersect.

Category

Heroes

Layout archetype

Overlap

Page position

hero (derived)

Purpose

explain (derived)

Field

light (derived)

Interaction

static (derived)

Motifs

Elevation frame, Ledger pair, Held column

Content it requires

• A two-part headline
• One paragraph of 35 to 50 words
• Two calls to action
• A wide image
• Three ledger rows

Do not use it when

• No text sits on the image, which is deliberate. Do not move the headline onto the plate to save vertical space.
• The only pattern using the overlap archetype. One per page, and never above another full-bleed section.
• The plate runs off the right edge. Do not crop a subject into that margin.

Variants

None. Colour swaps and mirrored alignment do not count as variants.

Implementation

src/components/patterns/HeroImageOverlap.astro

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

<HeroImageOverlap />

Import directly. Do not route production through patternComponents. This specimen is rendered with Pattern Lab demo props (headingTag) that a production page should replace with its own content.

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.