EventDetail

Deprecated

Public-facing event detail card — hero image, title, date/venue meta, optional tag chips, plain-text description, sticky CTA panel (Buy / Share). Two-column grid that collapses to a single stack under md.

Categoryorganisms

Sourcecomponents/organisms/eventdetail/EventDetail.tsx

AI HintDEPRECATED (2026-09-02 — W3 organisms plan): superseded by `DetailPageLayout` (patterns.ts:18124 / GenericDetailPageHost). New work must adopt DetailPageLayout; this organism is kept only for the deletion-bound contract and ships zero consumers in the monorepo. The on-disk internal symbol remains `EventDetail`; the barrel alias `EventDetailOrganism` (ADR-042) avoids a collision with the storefront dashboard `EventDetail`.

⚠ Deprecated — use DetailPageLayout

EventDetail is a self-contained event card with hardcoded FR/EN labels (i18n-hostile) and zero consumers. Since 2026-09-02 (W3 organisms plan) the generic slot-host DetailPageLayout (organisms/DetailPageLayout) owns the detail-page chrome — see the DetailPageLayout docs page for migration guidance. Deletion is scheduled as a follow-up wave (kept to avoid a catalog regression).

Aperçu détaillé d'un événement (poster, tags, description, panneau latéral Acheter / Partager). FR-CA : « Festival Jazz MTL — Place des Festivals ».

EventDetail

Organism — Event family (Family 2)

Composant deux colonnes : à gauche poster, tags, titre, date, lieu, description ; à droite panneau sticky Acheter / Partager. Compatible avec hero responsive.

Pianiste de jazz sur scène éclairée en bleu

Jazz
Plein air
Famille

Festival Jazz Montréal 2026

24 juin 2026 · 20 h · Place des Festivals, Montréal, QC

14 concerts en plein air sur deux scènes. Programmation 2026 : Pat Metheny, Esperanza Spalding, BadBadNotGood et plusieurs artistes québécois dont Rémi Bolduc et Christine Jensen.

This component supports light and dark mode.

Props

Prop

Type

Default

Description

title*

string

—

Titre de l'événement.

imageUrl*

string

—

URL du poster (16:9).

imageAlt*

string

—

Texte alternatif obligatoire (WCAG 1.1.1).

date*

string

—

Date formatée.

venue*

string

—

Nom du lieu.

city*

string

—

Ville.

description*

string

—

Texte de présentation.

tags

string[]

—

Étiquettes chips.

ctaHref*

string

—

Lien Acheter des billets.

Props

Preview

EventDetail

Prop

Type

Required

Default

Description

title

string

Required

—

Event title (rendered as the article's H1).

imageUrl

string

Required

—

Hero poster URL (16:9 aspect).

imageAlt

string

Required

—

Required poster alt text (WCAG 1.1.1).

date

string

Required

—

Pre-formatted date string (caller-localized). Rendered both in the header meta line and in the sticky aside.

venue

string

Required

—

Venue name (pre-localized).

city

string

Required

—

City (pre-localized).

description

string

Required

—

Plain-text description (1-3 paragraphs); whitespace-pre-line preserved.

tags

string[]

Optional

—

Optional tag chips rendered above the title (pre-localized).

ctaHref

string

Required

—

Buy-tickets link target.

locale

"fr" | "en"

Optional

'fr'

Stop-gap locale for the three hardcoded FR/EN strings (CTA / Share / Performances). Kept for the deletion-bound contract; new work must use DetailPageLayout and supply caller-localized strings.

className

string

Optional

—

Optional className merged into the article wrapper.

Quick use:<EventDetail />

Accessibility

ARIA roleregion

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<EventDetailOrganism title="Festival Jazz MTL" imageUrl="/poster.jpg" imageAlt="Pianiste sur scène" date="24 juin 2026" venue="Place des Festivals" city="Montréal" description="14 concerts en plein air." ctaHref="/events/jazz-mtl" />

Anti-patterns

— Do not adopt in new code — use DetailPageLayout (organisms/DetailPageLayout) instead.

— Do not deep-import `./components/organisms/eventdetail/EventDetail` from consumers — the barrel alias `EventDetailOrganism` is the public entry.