SideCard

Implemented

Storefront marketing aside — optional header image, eyebrow (defaults to « À découvrir » / « Discover »), title, body, bullet list and a text CTA with arrow, on a rounded-ep-md bg-ep-surface-card surface with border-ep-border. Complements main content columns (event detail sidebars, help panels). Exported from the barrel (src/index.ts) with SideCardProps.

Categoryorganisms

Sourcecomponents/organisms/sidecard/SideCard.tsx

AI HintStorefront marketing rail — event detail sidebars, help panels, promo asides beside main content columns. The localized default eyebrow keeps standalone cards self-labelling.

Carte latérale marketing (eyebrow + titre + corps + bullets + CTA lien). FR-CA : « À découvrir · Festival Jazz MTL · 14 concerts en plein air ».

SideCard

Organism - Storefront family (Family 8)

Carte compacte avec image hero 128 px, eyebrow (défaut localisé), titre, paragraphe et liste à puces optionnelle — complément des colonnes de contenu principal (barres latérales de page détail, panneaux d'aide).

This component supports light and dark mode.

Props

Prop

Type

Default

Description

eyebrow

string

—

Sur-titre (défaut localisé).

title*

string

—

Titre (h3 relié par aria-labelledby).

body

string

—

Texte de présentation.

bullets

string[]

—

Liste à puces.

cta

{ label; href }

—

CTA lien (route interne).

imageUrl

string

—

Image hero (alt requis — union).

imageAlt

string

—

Texte alternatif de l’image — requis avec imageUrl ; "" pour décoratif.

locale

"fr" | "en"

fr

Locale du sur-titre par défaut (« À découvrir » / « Discover »).

id

string

—

Id racine — le titre reçoit `${id}-title`.

className

string

—

Classes additionnelles sur la racine.

Props

Preview

SideCard

Prop

Type

Required

Default

Description

eyebrow

string

Optional

« À découvrir » (fr) / « Discover » (en)

Overline label above the title; defaults to the localized fallback. An explicit eyebrow always wins.

title

string

Required

—

Card heading — rendered as the <h3> that names the aside via aria-labelledby.

body

string

Optional

—

Supporting paragraph below the title.

bullets

string[]

Optional

—

Inline list of bullets rendered below body copy.

cta

{ label: string; href: string }

Optional

—

Inline text link with arrow rendered at the card foot. href is an internal route.

imageUrl

string

Optional

—

Header image URL (h-32 object-cover, lazy). Setting it makes imageAlt required (union type).

imageAlt

string

Optional

—

Alt text — required whenever imageUrl is set; "" is the documented decorative escape hatch.

locale

"fr" | "en"

Optional

'fr'

Selects the default eyebrow fallback only; all other copy is consumer-owned.

id

string

Optional

`sidecard-${useId()}`

Root id — the title heading receives `${id}-title` (aria-labelledby wiring).

className

string

Optional

—

Extra classes appended to the <aside> root.

Quick use:<SideCard />

Accessibility

ARIA rolecomplementary

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<SideCard imageUrl="/img/osm.jpg" imageAlt="Pianiste sur scène" title="Laissez-passer saisonniers" body="14 concerts pour 248,00 $." bullets={["Toutes les dates OSM"]} cta={{ label: "Découvrir", href: "/saison-osm" }} />

Anti-patterns

— Do not use for dashboard KPI widgets — WidgetCard (molecule) owns that surface

— Do not pass imageUrl without imageAlt — the union type rejects it; imageAlt "" is only for deliberately decorative images

— Do not reach for AccentCard for content rails — AccentCard is an interactive tone-ring CTA card without image, bullets or locale