Hero

Implemented

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

Categoryorganisms

Sourcecomponents/organisms/Hero/Hero.tsx

AI HintUse for complex UI sections. Compose molecules and atoms into page sections.

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

Hero

design-system

Full-width marketing banner over an image or video background with a gradient scrim. i18n-via-props: no hardcoded strings — every visible label arrives through props, and ariaLabel defaults to EN "Hero" (FR callers override via prop). a11y: <section> landmark named by its <h1> (aria-labelledby), decorative media and scrim aria-hidden, badge links at the --ep-tap-min (44px) floor with focus rings. Overlay text uses theme-stable --ep-overlay-text-* tokens in both light and dark.

Foule en fête devant une scène en plein air au coucher du soleil

Des billets qui travaillent aussi fort que votre événement

Plus de 500 événements — musique, sport, arts de la scène.

Props

Prop

Type

Default

Description

headline*

string

—

Primary <h1> headline. Required — all copy arrives via props (i18n-via-props).

background*

HeroBackground

—

Background media: { type: "image" | "video"; url: string; alt: string; posterUrl?: string } — posterUrl (video only) is the poster frame shown before playback.

search*

React.ReactNode

—

Search element rendered under the subheadline. Any ReactNode — the storefront passes its own HeroSearch twin; the DS HeroSearch molecule also fits.

subheadline

string

—

Supporting line under the headline. Not rendered when omitted.

featuredBadges

HeroFeaturedBadge[]

—

Pill links — { label: string; href: string; icon?: React.ReactNode }[]. Each renders a ≥44×44px (--ep-tap-min) tap-target link with a focus ring. Defaults to [].

alignment

"left" | "center"

—

Text and content alignment. Defaults to 'left'.

height

"sm" | "md" | "lg" | "full"

—

Min-height preset: 20rem / 28rem / 36rem / full viewport. Defaults to 'lg'.

ariaLabel

string

—

Accessible name for the <section> landmark (aria-labelledby points at the <h1>). Defaults to EN 'Hero' — FR callers override via prop.

className

string

—

Additional classes appended to the section root.

id

string

—

Section id; defaults to hero-<useId> (also derives the headline anchor id).

Props

Preview

Hero

Prop

Type

Required

Default

Description

headline

string

Required

—

Primary `<h1>` headline. No hardcoded strings — all copy arrives via props (i18n-via-props).

background

HeroBackground

Required

—

Background media: { type: 'image' | 'video'; url: string; alt: string; posterUrl?: string } — posterUrl (video only) is the poster frame shown before playback.

search

React.ReactNode

Required

—

Search element rendered under the subheadline. Any ReactNode — the storefront passes its own HeroSearch twin; the DS HeroSearch molecule also fits.

subheadline

string

Optional

—

Supporting line under the headline. Not rendered when omitted.

featuredBadges

HeroFeaturedBadge[]

Optional

[]

Pill links: { label: string; href: string; icon?: React.ReactNode }[]. Each renders a ≥44×44px (--ep-tap-min) tap-target link with a focus ring.

alignment

"left" | "center"

Optional

'left'

Text and content alignment.

height

"sm" | "md" | "lg" | "full"

Optional

'lg'

Min-height preset: 20rem / 28rem / 36rem / full viewport.

ariaLabel

string

Optional

'Hero'

Accessible name for the <section> landmark (aria-labelledby points at the <h1>). EN default — FR callers override via prop.

className

string

Optional

—

Additional classes appended to the section root.

id

string

Optional

auto

Section id; defaults to hero-<useId> (also derives the headline anchor id).

Quick use:<Hero />

Accessibility

ARIA roleregion

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<Hero headline={t("headline")} subheadline={t("subheadline")} background={background} search={<HeroSearch />} featuredBadges={badges} alignment="left" height="lg" ariaLabel="Hero" />

Example 2

tsxSnippet

<Hero headline="En vedette" background={{ type: "video", url: heroVideo, alt: "Ambiance du festival", posterUrl: heroPoster }} search={<HeroSearch />} alignment="center" height="full" ariaLabel="Hero" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources