Heroes and page introductions

Opening sections that introduce a product, service or story and its next step.

Website sections 2 components

Sort

Filters

Kind

Section Control Composition Integration recipe

Integration level

Presentational Local interaction Service required SvelteKit recipe

Dependencies

No extra packages or services Declares a third-party package Needs an external service

No extra packages or services: Svelte and Tailwind CSS prerequisites still apply.

Runtime

Svelte SvelteKit

Capabilities

Supports dark mode

Website sections

Category: Heroes

2 components

Split-media hero

An opening section with the headline, copy and actions beside an image or a muted looping video. The media reserves its aspect ratio, stacks under the copy on phones and swaps sides with one prop.
- Section
- No additional dependencies
Text-first hero

A homepage opener built only from type: an optional eyebrow, a large headline, a supporting paragraph, a filled primary link, an optional secondary link and an optional note. No media, and no client JavaScript required.
- Section
- No additional dependencies