Full-bleed statement hero

Use it when

One statement and one photograph, each taking half the viewport, meeting at a hard edge. For a page that has to establish what this is before it explains anything.

Category

Heroes

Layout archetype

Split screen

Page position

hero

Purpose

explain

Field

light

Interaction

static

Motifs

Elevation frame

Content it requires

• A statement of 8 to 14 words
• One photograph worth running full height
• One action

Do not use it when

• Everything except the statement, the image, and one action is opt-in. A hero that needs a label, a caveat, and a metadata block is a summary of the page beneath it.
• Needs a real photograph. Against a placeholder half the section is dead.
• Shares the split archetype with HRO-06 and CTA-03. One split per page, never two adjacent.
• The statement is the whole left half. A headline needing a supporting list belongs in HRO-01.

Variants

label and note props re-enable the suppressed content for the rare page that genuinely needs a provenance line.

Implementation

src/components/patterns/HeroPlateStatement.astro

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

<HeroPlateStatement />

Import directly. Do not route production through patternComponents. This specimen is rendered with Pattern Lab demo props (headingTag, imageSrc, imageAlt, imageWidth, imageHeight) 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.