Hero

organisms

Full-bleed marketing hero — background image/video + gradient overlay + headline + subtitle + HeroSearch + featured badges. Used on /, /landing/* pages.

ARIA Role: region

Demo

Demo for Hero (organisms)

Full-bleed marketing hero — background image/video + gradient overlay + headline + subtitle + HeroSearch + featured badges. Used on /, /landing/* pages.

Props

Prop	Type	Required	Default	Description
`headline`	`string`	Yes	`—`
`background`	`HeroBackground`	Yes	`—`
`search`	`React.ReactNode`	Yes	`—`	HeroSearch component

TypeScript Interface

interface HeroProps {
  headline: string;
  subheadline?: string;
  background: { type: 'image' | 'video'; url: string; alt: string };
  search: React.ReactNode;
  featuredBadges?: { label: string; icon?: React.ReactNode; href: string }[];
  alignment?: 'left' | 'center';
  height?: 'sm' | 'md' | 'lg' | 'full';
}

Assertions (NASA Rule 5)

[type]headline, background, search all required(NASA Rule 5)
[aria]<section aria-labelledby=headlineId>; video background has aria-hidden + captions track(WCAG 1.1.1, 1.2.2)

Usage

Import

import { Hero } from '@epasslive/design-system'

Basic

<Hero />

With Variants

<Hero variant="primary" size="md" />