Category hero

Use it when

The homepage opening. States the category claim and immediately shows the horizon vocabulary, so the reader meets the organising idea before the first scroll.

Category

Heroes

Layout archetype

Held column

Page position

hero (derived)

Purpose

explain (derived)

Field

dark (derived)

Interaction

static (derived)

Motifs

Horizon, Held column, Quiet field

Content it requires

• A two-part headline
• One paragraph of 30 to 45 words
• Two calls to action
• Five horizon stops

Do not use it when

• The headline must split into two clauses. A single clause loses the lime emphasis line.
• Do not use on a page that also runs the priority board. The horizon appears twice.

Variants

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

Implementation

src/components/patterns/HeroCategory.astro

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

<HeroCategory />

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.