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

pnpm add @behivetech/organisms.hero-banner

This is the snapshot of v0.8.4, the current version, as recorded on 2026-11-10. The live page runs its examples →

Examples of v0.8.4 are shown as code; only the latest version runs live. Open the live examples →

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 />);