Hero

Marketing · src/components/Hero/Hero.tsx

The top of a page: one statement, one action, one second path.

No alignment prop, by design. The statement sits on a wash, in nothing boxed, from the left rail - and 50-not-generated.md names per-section alignment controls as the tell of a generated layout.

The second path is a link, never a second button. Two equal buttons side by side is the generated hero's own signature, and the API refuses to produce it.

The film never autoplays under reduced motion, on a metered connection, or on a phone. The pause control is an icon with a 44px hit area, so it is reachable without competing with the call to action.

Import

import { Hero } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
mark	React.ReactNode	A Mark, above the statement.
lede	React.ReactNode	A supporting paragraph under the statement.
action	React.ReactNode	The one action.
secondary	React.ReactNode	The second path. Rendered as a link, never a second button.
secondaryHref	string
foot	React.ReactNode
media	React.ReactNode	A picture or figure beside the statement. Ignored when film is set.
film	HeroFilmSpec	A background film. Autoplay is withheld on reduced motion, save-data and small screens.
className	string
children	React.ReactNode	The statement: a Display on the homepage, a Statement elsewhere.

Exported types

HeroFilmSpec