Skip to main content

EventsRow

Implemented

EventsRow — horizontally scrollable rail of compact hand-rolled event cards (« Événements à la une » region, locale-aware). Fixed-width w-56 (224px) cards with gap-3 (12px), image (or IMG placeholder block), two-line clamped title, venue · date, teal from-price and a Voir/View link sized at --ep-tap-min. The rail overflow-scrolls with proximity snap. Does NOT compose the EventCard organism (self-contained markup).

Categoryorganisms
Sourcecomponents/organisms/eventsrow/EventsRow.tsx
AI HintUse for a horizontally scrollable « featured events » rail on the storefront. Self-contained card markup — does not compose the EventCard organism (layout differs: compact 224px fixed-width rail cards vs EventCard's grid cards). Pass locale='en' for the English region/action labels. Cards snap at proximity on the scroll container.

Rangée horizontale scrollable d'événements vedettes — cartes 224px de large (w-56), écart 12px (gap-3), snap proximity. FR-CA : « Événements à la une · Voir ».

EventsRow

Organism — Storefront family (Family 8)

Rail horizontal de cartes 224 px séparées par 12 px, défilable à la souris, au clavier et au tactile (overflow natif + snap-x snap-proximity, snap-start par carte). Adapté aux rails « À la une » de la page d'accueil.

  • Foule en festival en plein air

    Osheaga — Jour 1

    Parc Jean-Drapeau · 1er août

    145,00 $Voir
  • Scène extérieure en soirée

    Osheaga — Jour 2

    Parc Jean-Drapeau · 2 août

    145,00 $Voir
  • Concert sous les projecteurs

    Osheaga — Jour 3

    Parc Jean-Drapeau · 3 août

    145,00 $Voir
  • Saxophoniste en plein air

    Jazz sous les étoiles

    Théâtre Verdure · 14 août

    55,00 $Voir
  • Foule en soirée électro

    Electro Nuit Blanche

    Hangar 16 · 22 août

    75,00 $Voir

  • FrancoFolies — Scène Bell

    Quartier des spectacles · 9 juin

    GratuitVoir

This component supports light and dark mode.

Props

Prop
Type
Default
Description
events*
EventsRowItem[]
—

Événements à afficher — { id, title, venue, date, fromPrice, imageUrl?, imageAlt? }. Un tableau vide rend une liste vide (aucun état vide).

locale
'fr' | 'en'
fr

Bascule les DEUX libellés : le lien d'action (« Voir » / « View ») ET le nom de la région aria (« Événements à la une » / « Featured events »). Défaut FR.

className
string
—

Classes CSS additionnelles ajoutées au conteneur scrollable (la région).

Props

Preview

EventsRow

Prop
Type
Required
Default
Description
events
EventsRowItem[]
Required
—

Cards to render — { id, title, venue, date, fromPrice, imageUrl?, imageAlt? }. An empty array renders an empty list (no empty-state branch).

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

Localizes the region aria-label (« Événements à la une » / « Featured events ») and the action link (Voir / View). FR default.

className
string
Optional
—

Additional CSS classes appended to the scrollable region wrapper.

Quick use:<EventsRow />

Accessibility

ARIA rolelist

ARIA

1 rule

WCAG 1.3.1

Rail is a named region (role='region' + locale-aware aria-label); the ul keeps role='list' so Safari does not strip list semantics from the flex layout

tap-target

1 rule

WCAG 2.5.5 / 2.5.8

Voir/View link meets WCAG 2.5.5/2.5.8 minimum tap target via --ep-tap-min on both axes (44px)

Usage

Import

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

Example 1

tsxSnippet
<EventsRow events={events} />

Example 2

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

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

— Do not rely on the card border as a state indicator — it is decorative only

Design System v4.1.0 | ePassLive