Skip to main content

EventList

Implemented

Vertical divided list of events — compact 1-per-row rows (thumbnail, title + badge chip, date · venue, city, fromPrice, per-row 'Acheter des billets' button), not EventCard tiles. For the list view toggle. Renders its own row markup — does NOT compose the EventCard organism (but DOES compose the EmptyState molecule on empty input). All three authored strings localize via locale (FR default). Rows stack below sm; buy links carry per-event names and the 44px tap floor.

Categoryorganisms
Sourcecomponents/organisms/eventlist/EventList.tsx
AI HintUse for dense vertical event listings (search results, list-view toggle). Empty input composes the EmptyState molecule (locale-aware default title) — same family behavior as EventGrid; loading states stay call-site-owned. No events bound is enforced in source.

Liste verticale d'événements (image 64×64, titre, date, lieu, ville, prix, CTA Acheter). FR-CA : « Festival Jazz MTL · 24 juin · Place des Festivals, Montréal · À partir de 48,00 $ · Acheter des billets ».

EventList

Organism — Storefront family (Family 8)

Liste dense et verticale adaptée aux écrans étroits et aux résultats de recherche. Le lien Acheter des billets est un <a> sémantique accessible.

  • Festival Jazz MTL — QuartetDernières places

    24 juin 2026 · Place des Festivals, Montréal

    À partir de

    48,00 $

    Acheter des billets

  • OSM — Symphonie n° 5

    18 avril 2026 · Maison symphonique, Montréal

    À partir de

    88,00 $

    Acheter des billets

  • Lion d'Or — Gala Jazz

    2 mai 2026 · Lion d'Or, Montréal

    À partir de

    54,00 $

    Acheter des billets

  • Salle Wilfrid-Pelletier — Récital

    22 avril 2026 · Salle Wilfrid-Pelletier, Québec

    À partir de

    56,00 $

    Acheter des billets

This component supports light and dark mode.

Props

Prop
Type
Default
Description
events*
EventListItem[]
—

Événements à afficher (chaînes pré-formatées par l’appelant). Tableau vide → molécule EmptyState (titre localisé).

className
string
—

Classes additionnelles fusionnées sur le conteneur de liste.

locale
'fr' | 'en'
fr

Bascule les trois libellés authored : lien Acheter, légende de prix (À partir de / From) et titre d’état vide.

Props

Preview

EventList

Prop
Type
Required
Default
Description
events
EventListItem[]
Required
—

Pre-formatted rows — { id, title, date, venue, city, fromPrice, imageUrl?, imageAlt?, badge? }; all strings are call-site formatted (no bounding/slicing in source).

className
string
Optional
—

Appended to the ul wrapper.

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

Locale for the strings EventList itself authors via its STRINGS map — buy label (Acheter des billets / Buy tickets), price caption (« À partir de » / « From ») and the empty-state title (Aucun événement trouvé / No events found). Event data (title/date/venue/city/fromPrice/badge) stays call-site-owned and pre-formatted. Defaults to 'fr' — unlike EventGrid which defaults to 'en'.

Quick use:<EventList />

Accessibility

ARIA rolelist

ARIA

2 rules

WCAG 1.3.1

role='list' on the ul (explicit, keeps list semantics over the divide-y layout)

WCAG 2.5.3 / 4.1.2

each buy link exposes a per-event accessible name '{title}, {buyLabel}' containing its visible text verbatim

a11y

1 rule

WCAG 2.5.5 / 2.5.8

buy links enforce the 44px --ep-tap-min floor on both axes (min-h/min-w arbitrary utilities)

Usage

Import

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

Example 1

tsxSnippet
<EventList events={events} />

Example 2

tsxSnippet
<EventList events={events} locale="en" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

— Do not pass EventCardPublicConfig[] — items are pre-formatted EventListItem rows (image/href derived internally as /events/{id})

Design System v4.1.0 | ePassLive