Split screen hero

Use it when

Alternate to HRO-01. Two full-height halves meeting at a hard edge, dark against lime. The contrast between the two halves is the whole layout.

Category

Heroes

Layout archetype

Split screen

Page position

hero (derived)

Purpose

explain (derived)

Field

dark (derived)

Interaction

static (derived)

Motifs

Condition marker, Margin note

Content it requires

• A two-part headline
• One paragraph
• Four to six short cost items
• One action

Do not use it when

• Both halves must carry real content. A decorative half wastes half the viewport.
• The lime half is loud. One per page, and not on a page that already uses DIF-02.

Variants

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

Implementation

src/components/patterns/HeroSplitScreen.astro

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

<HeroSplitScreen />

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.