Skip to main content

EventDetailPublic

Implemented

Event detail page layout — EventHero + (Description + Artists + Venue + Reviews + FAQ) on left, sticky TicketTierList + Buy CTA on right.

Categorytemplates
Sourcesrc/components/templates/eventdetailpublic/EventDetailPublic.tsx
AI HintUse for page layouts. Define structure and composition patterns.

Template public de fiche événement : bandeau hero plein-largeur + cinq sections labellisées (À propos / Artistes / Lieu / Avis / FAQ) à gauche, panneau de billets sticky 380 px à droite. FR-CA : « À propos · Artistes · Lieu · Avis · FAQ ».

EventDetailPublic

Template - Commerce family (Family 7)

Slot-host de la page événement publique : hero plein-largeur, puis grille [1fr_380px] ≥lg — cinq sections <section aria-labelledby> à gauche, <aside> sticky à droite. Ordre DOM tickets-first sur mobile (NASA Rule 6). Aucun data fetching.

Pianiste en scène sous les projecteurs

À la une

Festival Jazz Montréal 2026

14 concerts en plein air du 24 juin au 5 juillet.

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

À propos

Quatorze concerts en plein air, du piano solo aux grandes formations, sur les scènes extérieures de la Place des Festivals.

Artistes

  • Herbie Hancock
  • Snarky Puppy
  • Cécile McLorin Salvant

Lieu

Place des Festivals
  • Disponible (< 30 %)
  • Bien vendu (30-69 %)
  • Presque complet (70-94 %)
  • Complet (≥ 95 %)

Avis

« Une programmation d'une ampleur rare. » — La Presse

FAQ

Questions fréquentes

This component supports light and dark mode.

Composition

EventDetailPublic compose la page événement publique : un bandeau hero plein-largeur, puis une grille deux colonnes — à gauche les cinq sections labellisées (À propos, Artistes, Lieu, Avis, FAQ ; les trois optionnelles ne s'affichent que si le slot est fourni), à droite un aside sticky de 380 px (≥lg) accueillant le panneau de billets + le CTA d'achat. Sur mobile, l'aside passe au-dessus du contenu (ordre DOM tickets-first, NASA Rule 6). Le template ne s'occupe que de l'échafaudage et des titres de sections : chaque contenu est fourni par l'appelant (slot-host, zéro data fetching).

Prop
Type
Default
Description
hero*
React.ReactNode
—

Full-bleed hero band above the two-column body. Canonical filler: EventHero (owns its own heading/landmark semantics).

description*
React.ReactNode
—

About-this-event content — first labelled section of the left column (« À propos »). Required (NASA Rule 5).

artists
React.ReactNode
—

Optional line-up content — labelled section (« Artistes ») rendered only when provided.

venue*
React.ReactNode
—

Venue block (map, address, access) — labelled section (« Lieu »). Required (NASA Rule 5).

reviews
React.ReactNode
—

Optional visitor reviews block — labelled section (« Avis ») rendered only when provided.

faq
React.ReactNode
—

Optional FAQ block — labelled section (« FAQ ») rendered only when provided.

ticketPanel*
React.ReactNode
—

Purchase panel in the right <aside> — sticky ≥lg, above content on mobile (NASA Rule 6). Canonical filler: TicketTierList + Buy CTA.

locale
"fr" | "en"
—

Locale for the built-in bilingual section headings map (fr default).

labels
Partial<EventDetailPublicLabels>
—

Per-key override of the bilingual section headings map.

className
string
—

Extra classes appended to the root <div> element.

Props

Preview

EventDetailPublic

Prop
Type
Required
Default
Description
hero
React.ReactNode
Required
—

Full-bleed hero band rendered edge-to-edge above the two-column body. Canonical filler: the EventHero organism (owns its own heading/landmark semantics — the template adds none).

description
React.ReactNode
Required
—

About-this-event content — first labelled section of the left column (« À propos »). Required (NASA Rule 5).

artists
React.ReactNode
Optional
—

Optional line-up / artists content — renders its own labelled section (« Artistes ») only when provided.

venue
React.ReactNode
Required
—

Venue block (map, address, access info) — labelled section (« Lieu »). Required (NASA Rule 5).

reviews
React.ReactNode
Optional
—

Optional visitor reviews block — labelled section (« Avis ») only when provided.

faq
React.ReactNode
Optional
—

Optional FAQ block — labelled section (« FAQ ») only when provided.

ticketPanel
React.ReactNode
Required
—

Ticket purchase panel rendered in the right-hand <aside>: sticky on ≥lg desktop, stacked ABOVE the content on mobile (NASA Rule 6). Canonical filler: TicketTierList + Buy CTA. Required (NASA Rule 5).

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

Switches the five section headings via the DEFAULT_LABELS map (À propos/About this event, Artistes/Line-up, Lieu/Venue, Avis/Reviews, FAQ).

labels
Partial<EventDetailPublicLabels>
Optional
—

Partial per-key override of the bilingual section headings map.

className
string
Optional
—

Appended to the root <div> class list.

Quick use:<EventDetailPublic />

Accessibility

ARIA rolenone (page provides <main>)

Type

1 rule

NASA Rule 5

hero, description, venue, ticketPanel all required

render

1 rule

NASA Rule 6

Sticky right column on desktop, stacked above content on mobile

a11y

1 rule

WCAG 1.3.1

sections labellisées aria-labelledby; la page fournit <main> (root is a plain div, NOT role=main)

Usage

Import

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

Example 1

tsxSnippet
<EventDetailPublic hero={<EventHero … />} description={<Body>…</Body>} venue={<VenueMap … />} ticketPanel={<TicketTierList … />} />

Example 2

tsxSnippet
<EventDetailPublic hero={hero} description={about} artists={lineUp} venue={venueMap} reviews={<Reviews … />} faq={<FAQ … />} ticketPanel={panel} locale="en" />

Anti-patterns

— Do not include business logic in templates

— Avoid hardcoded content in templates

Design System v4.1.0 | ePassLive