Hero
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | ReactNode | — | Eyebrow / pill rendered above the headline. |
| title * | ReactNode | — | Headline. Pass JSX to highlight a phrase (e.g., `<span className="text-accent">…</span>`). |
| titleAs | enum | h1 | Heading level for the title. Default `'h1'` — only override on pages that already have an `<h1>` elsewhere (e.g., a section hero inside a longer landing page). |
| description | ReactNode | — | Subheading. |
| actions | ReactNode | — | Action buttons row. |
| visual | ReactNode | — | Trailing visual (right-side image, animation). When provided, the hero switches to a two-column layout. |