Hero Banner
v0.8.3StableA full-width hero section: a background image behind a headline, subtext and call-to-action links, aligned left, centre or right.
A full-width hero section: a background image behind a headline, subtext and call-to-action links, aligned left, centre or right.
Usage
Examples
Open all 2 →Properties
HeroBanner props
| Prop | Type | Default | Description |
|---|---|---|---|
align | "center" | "right" | "left" | center | Horizontal alignment of the content; defaults to center |
children | ReactNode | — | Additional content rendered after the CTA |
className | string | — | Additional class names to merge with the component root element |
ctaButtons | HeroBannerCta[] | — | Call-to-action links. When present these render instead of `ctaLabel`/`ctaHref` |
ctaHref | string | — | Destination URL for the call-to-action link; requires `ctaLabel` to render. Superseded by `ctaButtons` |
ctaLabel | string | — | Label for the call-to-action link; requires `ctaHref` to render. Superseded by `ctaButtons`, kept so existing content keeps rendering |
headline | string | — | Main heading text |
imageUrl | string | — | Background image URL rendered behind the content |
subtext | string | — | Supporting text shown below the headline |