Skip to main content

EventHero

Implemented

Full-bleed event-page hero — background image under a bg-ep-gradient-scrim readability scrim, teal uppercase eyebrow, h1 title, subtitle, a Date/Venue metadata <dl> and one optional inline CTA. FR/EN definition-term labels via locale (default fr). Content-driven height (no viewport preset). Mounts in the EventDetailPublic template's hero slot. No share/save actions, no tabbed info.

Categoryorganisms
Sourcecomponents/organisms/eventhero/EventHero.tsx
AI HintEvent-scoped detail-page hero — distinct from the marketing Hero organism (HeroSearch, featured badges, height presets): EventHero is content-height, renders a Date/Venue dl and at most one inline CTA, and owns no data fetching. Mount it in the EventDetailPublic template's hero slot (ReactNode). Pass an image with headroom at the bottom — text legibility relies on the bg-ep-gradient-scrim overlay.

Bannière héros plein-largeur avec image de fond, dégradé sombre pour lisibilité, eyebrow + titre + sous-titre + métadonnées (date, lieu) + CTA. FR-CA : « À la une · Festival Jazz MTL · Place des Festivals ».

EventHero

Organism — Event family (Family 2)

Hero plein-largeur (full-bleed) avec image de fond et scrim de lisibilité (`bg-ep-gradient-scrim`) pour garantir la lisibilité du texte blanc. Hauteur déterminée par le contenu (aucun réglage viewport). Le CTA utilise focus-visible:ring-ep-teal + ring-offset pour la lisibilité sur fond sombre.

Pianiste de jazz sur scène

À la une

Festival Jazz Montréal 2026

14 concerts en plein air, du 24 juin au 5 juillet, sur la Place des Festivals.

Date
24 juin → 5 juillet 2026
Lieu
Place des Festivals, Montréal
Acheter des billets

This component supports light and dark mode.

Props

Prop
Type
Default
Description
eyebrow*
string
—

Sur-titre (ex. : « À la une »).

title*
string
—

Titre principal (1 à 8 mots).

subtitle*
string
—

Sous-titre (1 à 2 phrases).

imageUrl*
string
—

URL de l'image de fond (16:9 ou 21:9).

imageAlt*
string
—

Texte alternatif obligatoire.

date*
string
—

Date formatée.

venue*
string
—

Lieu.

cta
{ label; href }
—

Bouton d'appel à l'action.

locale
"fr" | "en"
—

Langue des termes <dt> uniquement — fr : « Date / Lieu », en : « Date / Venue ». Défaut : fr (aucun formatage de date).

className
string
—

Classes supplémentaires ajoutées à la racine <section>.

Props

Preview

EventHero

Prop
Type
Required
Default
Description
eyebrow
string
Required
—

Uppercase teal overline above the title (e.g. « À la une » / Featured).

title
string
Required
—

Rendered as the section <h1>; doubles as the section's accessible name via aria-labelledby.

subtitle
string
Required
—

Deck line under the title, clamped to max-w-xl; inverse text at opacity-90.

imageUrl
string
Required
—

Hero background image URL — rendered as an absolute object-cover <img> behind the scrim.

imageAlt
string
Required
—

Alt text for the background <img> — required, not decorative (WCAG 1.1.1).

date
string
Required
—

Pre-formatted date string rendered verbatim as the Date <dd> — no formatting is applied.

venue
string
Required
—

Venue line rendered verbatim as the Lieu/Venue <dd>.

cta
{ label: string; href: string }
Optional
—

Optional inline link-CTA — bg-ep-btn-primary anchor (hover bg-ep-btn-primary-hover) with a trailing ArrowRight Phosphor icon; hidden when omitted.

locale
"fr" | "en"
Optional
'fr'

Label language for the Date/Venue <dt> terms only — fr: « Date / Lieu », en: « Date / Venue ». FR default; no date formatting is applied.

className
string
Optional
—

Extra classes appended to the <section> root.

Quick use:<EventHero />

Accessibility

ARIA roleregion

Type

1 rule

NASA Rule 5

eyebrow, title, subtitle, imageUrl, imageAlt, date, venue all required

ARIA

1 rule

WCAG 1.1.1

<section aria-labelledby> points at a React.useId()-generated h1 id (multi-instance safe); background <img> alt is a required prop (WCAG 1.1.1)

tap-target

1 rule

WCAG 2.5.5 / 2.5.8

CTA anchor meets WCAG 2.5.5/2.5.8 minimum via --ep-tap-min on both axes (44px)

Usage

Import

tsxSnippet
import { EventHero } from "@epasslive/design-system"

Example 1

tsxSnippet
<EventHero eyebrow="Concert" title="SOIRÉE LIVE" subtitle="Quintet invité : Riverside Collective" imageUrl="/img/soiree-live.jpg" imageAlt="Scène éclairée, foule en première ligne" date="24 juin 2026, 20 h" venue="Marché Bonsecours" />

Example 2

tsxSnippet
<EventHero eyebrow="Featured" title="Festival Jazz MTL 2026" subtitle="14 free outdoor concerts" imageUrl="/img/jazz-mtl.jpg" imageAlt="Jazz pianist on stage" date="Jun 24 → Jul 5, 2026" venue="Place des Festivals" cta={{ label: "Get tickets", href: "/events/jazz-mtl-2026" }} locale="en" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

— Do not pass locale expecting date formatting — it switches only the Date/Venue <dt> labels; format date strings at the call site

— Do not reach for this organism for the marketing landing hero — that is Hero (HeroSearch, featured badges, height presets)

Design System v4.1.0 | ePassLive