Hero Banner v0.8.3 · @behivetech

A full-width hero section: a background image behind a headline, subtext and call-to-action links, aligned left, centre or right.

Usage

1import { HeroBanner } from "@behivetech/organisms.hero-banner";
2
3<HeroBanner>Content</HeroBanner>;

Examples

Open all 2 →

Basic Hero Banner

1const BasicHeroBanner = () => (
2  <HeroBanner>HeroBanner content</HeroBanner>
3);
4
5render(<BasicHeroBanner />);

Hero Banner With Buttons

1const HeroBannerWithButtons = () => (
2  <HeroBanner
3    headline="Build it once"
4    subtext="Ship the same components to every site you run."
5    ctaButtons={[
6      { label: "Get started", href: "https://example.com" },
7      {
8        label: "Read the docs",
9        href: "https://docs.example.com",
10        variant: "secondary",
11      },
12    ]}
13  />
14);
15
16render(<HeroBannerWithButtons />);

Properties

`HeroBanner` props

Prop	Type	Default	Description
`align`	`"left" \| "center" \| "right"`	`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

Usage

Examples

Properties

HeroBanner props

`HeroBanner` props