Plan artifact hero

Use it when

Opens the Home Plan page. The plan excerpt does the persuading rather than an adjective, because the plan is the product.

Category

Heroes

Layout archetype

Held column

Page position

hero (derived)

Purpose

explain (derived)

Field

light (derived)

Interaction

static (derived)

Motifs

Condition marker, Margin note, Quiet field

Content it requires

• Headline
• Lead paragraph
• Four plan rows with a horizon each
• A provenance caption

Do not use it when

• The excerpt is illustrative and must stay captioned as such. Never present it as a real customer plan.
• Four rows only. Five starts to read as a real interface and invites feature questions.

Variants

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

Implementation

src/components/patterns/HeroPlanArtifact.astro

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

<HeroPlanArtifact />

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.