Article hero

Use it when

Journal article opening. Sets reading measure immediately and exposes the published and updated dates, which matters for both trust and AEO.

Category

Heroes

Layout archetype

Editorial column

Page position

hero (derived)

Purpose

explain (derived)

Field

light (derived)

Interaction

static (derived)

Motifs

None

Content it requires

• Pillar name
• Headline
• Standfirst of 20 to 35 words
• Published, updated, and length

Do not use it when

• No image slot. Article photography sits in the body where it is relevant, not decoratively at the top.
• Headlines over about 70 characters break the display balance.

Variants

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

Implementation

src/components/patterns/HeroArticle.astro

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

<HeroArticle />

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.