Hero
A section component for page heroes supporting center, split, and overlay layouts. Text slots accept plain strings or snippets; in the overlay layout, media becomes the full-bleed background.
Import
import { Hero } from "@hyzer-labs/ui"Demo
Hero is headless. The dashed outline below is docs scaffolding, so you can see its bounds.
Headless components for Svelte 5
<Hero
eyebrow="What's new"
title="Headless components for Svelte 5"
subtitle="Ships behavior, structure, and accessibility, not visual opinions."
headingLevel={2}
>
{#snippet actions()}
<Button>Get started</Button>
<Button variant="outline">Learn more</Button>
{/snippet}
</Hero>Split hero with styled media
<!-- Text slots take strings, or snippets when you need inner markup -->
<Hero layout="split" subtitle="Content on one side, media on the other." headingLevel={2}>
{#snippet title()}Split hero with <em>styled</em> media{/snippet}
{#snippet actions()}<Button>Get started</Button>{/snippet}
{#snippet media()}<img src="…" alt="…" />{/snippet}
</Hero>Overlay hero
<!-- In overlay, media becomes the full-bleed background -->
<Hero
layout="overlay"
title="Overlay hero"
subtitle="Content sits on top of the media background."
headingLevel={2}
>
{#snippet media()}<img src="…" alt="" />{/snippet}
</Hero>Heights are viewport-relative: half is 50vh and screen is 100vh,
so those demos grow well beyond the content.
height="auto"
<Hero
title={'height="auto"'}
subtitle="auto hugs content; half is 50vh; screen is 100vh."
headingLevel={2}
/>height="half"
<Hero height="half"
title={'height="half"'}
subtitle="auto hugs content; half is 50vh; screen is 100vh."
headingLevel={2}
/>height="screen"
<Hero height="screen"
title={'height="screen"'}
subtitle="auto hugs content; half is 50vh; screen is 100vh."
headingLevel={2}
/>align="start"
<Hero align="start"
title={'align="start"'}
subtitle="Controls content alignment in the center layout."
headingLevel={2}
>
{#snippet actions()}<Button>Action</Button>{/snippet}
</Hero>align="center"
<Hero
title={'align="center"'}
subtitle="Controls content alignment in the center layout."
headingLevel={2}
>
{#snippet actions()}<Button>Action</Button>{/snippet}
</Hero>align="end"
<Hero align="end"
title={'align="end"'}
subtitle="Controls content alignment in the center layout."
headingLevel={2}
>
{#snippet actions()}<Button>Action</Button>{/snippet}
</Hero>This only affects the split layout, and only while it is stacked: media moves above the
content, and DOM and reading order stay the same. The split stacks below 968px (--hz-width-md) of its own width. Use the slider to cross that threshold, then toggle reverseOnMobile to flip which element leads once it stacks.
media on top
Split hero
<Hero
layout="split"
reverseOnMobile
title="Split hero"
subtitle="Resize to stack; toggle to flip which comes first."
headingLevel={2}
>
{#snippet media()}<img src="…" alt="…" />{/snippet}
</Hero>Props
| Name | Type | Default | Note |
|---|---|---|---|
layout | 'center' | 'split' | 'overlay' | 'center' | |
height | 'auto' | 'screen' | 'half' | 'auto' | |
align | 'start' | 'center' | 'end' | 'center' | |
reverseOnMobile | boolean | false | Split layout only: media renders above content while the split is stacked. |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 1 | |
ariaLabel | string | — | Accessible name when no title is provided. |
class | string | — | Merged after the hz-hero class. |
eyebrow | string | Snippet | — | String for plain text; snippet for inner markup. |
title | string | Snippet | — | |
subtitle | string | Snippet | — | |
actions | Snippet | — | |
media | Snippet | — | Beside/below content in center/split; becomes the background in overlay. |
Theme hooks
What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.
Root class: .hz-hero
Data attributes
| Hook | Values | Styles |
|---|---|---|
data-layout | 'center' | 'split' | 'overlay' | In overlay the media becomes the background. split composes Split underneath, so .hz-split-layout is in reach. Default center. |
data-height | 'auto' | 'screen' | 'half' | Uses dvh where supported. Default auto. |
data-align | 'start' | 'center' | 'end' | Default center. |
data-reverse-on-mobile | present when reversed | Split layout only: wraps the media above the content on narrow screens. |
Part classes
| Hook | Values | Styles |
|---|---|---|
.hz-hero-background | child element | The full-bleed media, overlay layout only. |
.hz-hero-content | child element | The text column. |
.hz-hero-eyebrow | child element | The eyebrow line. |
.hz-hero-title | child element | The heading, at your headingLevel. |
.hz-hero-subtitle | child element | The subtitle, capped at 60ch. |
.hz-hero-actions | child element | The actions row. |
.hz-hero-media | child element | The media wrapper in center and split layouts. |
Accessibility
Hero renders a <section> with aria-labelledby pointing at the title element, or aria-label when there is no title. Use headingLevel to keep your page's heading hierarchy correct. If the page already has an h1, hero titles inside it are usually level 2.