Navigation & Headers
Loading playground
Overview
PageNotFound is the 404 page composition. It renders a theme-aware background illustration (or a custom media prop), the supplied headline and subline, and an optional cta button. headline and subline are required; the component does not fall back to default 404 copy. Pass surfaceTone ('light' | 'dark') to match the page background.
Key Business & UX Benefits
- A dead-end becomes a recovery path, with a clear back-to-home CTA that pulls otherwise-lost traffic back into the funnel instead of bouncing.
- Branded illustration and copy turn an error state into an on-brand moment, softening a frustrating experience for the visitor.
surfaceTonematches the page background, so the 404 reads correctly inside dark themes, light themes, and seasonal campaigns without one-off styling.
Feature List
- Pre-composed 404 layout with illustration, heading, subline, and a back-to-home CTA
- `surfaceTone` prop matches the page background so the screen reads correctly on dark and light themes
- Back-to-home call to action recovers traffic that would otherwise bounce from the dead-end
- Branded illustration and copy turn the error state into an on-brand recovery moment
- Drop-in composition that ships as a single section without per-page wiring
API Reference
| Prop | Default | Type |
|---|---|---|
headlinerequired | string | |
sublinerequired | string | |
media | ||
headlineTag | TextGroupHeadingAs ("h1" | "h2" | "h3" | "h4" | "h5" | "h6" | 2 more)Semantic HTML element for the headline (h1-h6 or div). Defaults to h2. | |
sublineAs | TextGroupSublineAs ("h1" | "h2" | "h3" | "h4" | "h5" | "h6" | 3 more)Semantic HTML element for the subline (p, h2-h6, div). Defaults to p. | |
surfaceTone | "light" | "dark" | |
cta | { text, href, variant, 1 more } |
| Slot | Type |
|---|---|
default | {} |