Service level hero

Use it when

Opens each of the four level pages. Leads with the customer intent quote and states the responsibility split above the fold, which is the only thing that actually differs between levels.

Category

Heroes

Layout archetype

Held column

Page position

hero (derived)

Purpose

explain (derived)

Field

light (derived)

Interaction

static (derived)

Motifs

Held column, Ledger pair, Condition marker, Margin note

Content it requires

• Level name
• Customer intent quote
• Responsibility line
• Three to five items on each side of the split

Do not use it when

• The two lists must be roughly balanced. A three against seven split looks broken.
• Intent quotes over about 20 words wrap badly at the serif size.

Variants

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

Implementation

src/components/patterns/HeroServiceLevel.astro

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

<HeroServiceLevel />

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.