Passer au contenu principal

MerchCard

Implemented

Artist-merchandise product card — square product image, h3 title, optional artist line, pre-formatted price and an add-to-cart CTA pinned to the card bottom. Static display organism (Family 7 Commerce, sibling of PackageCard/SideCard): price is a pre-formatted string and the button copy switches FR/EN via locale.

Categoryorganisms
Sourcecomponents/organisms/merchcard/MerchCard.tsx
AI HintUse for merchandise products (vinyl, tees, posters) on storefront commerce surfaces (Family 7, sibling of PackageCard/SideCard). Fully presentational: the CTA Button has no onClick yet (add-to-cart wiring is an ADR follow-up), price is a pre-formatted string rendered verbatim. locale switches the button copy. Dormant organism — zero live consumers (verified 2026-09-14).

Carte produit marchandise (vinyle, t-shirt, affiche). FR-CA : « Ajouter au panier ».

MerchCard

Organism - Commerce family (Family 7)

Carte 1:1 image carree, titre, artiste optionnel, prix et bouton Ajouter au panier.

Pochette de vinyle

Vinyle OSM Symphonie n 5

Orchestre symphonique de Montreal

32,00 $
Affiche de concert

Affiche Festival Jazz MTL

Editions ePassLive

18,00 $
T-shirt blanc

T-shirt Lion d Or 2025

Atelier Saint-Henri

28,00 $

This component supports light and dark mode.

Props

Prop
Type
Default
Description
id*
string
—

Identifiant unique du produit.

title*
string
—

Titre du produit.

artist
string
—

Artiste ou createur.

price*
string
—

Prix formate.

imageUrl*
string
—

URL image 1:1.

imageAlt*
string
—

Texte alternatif (WCAG 1.1.1).

locale
"fr" | "en"
—

Bascule le libellé du bouton (fr par défaut : « Ajouter au panier » / en : « Add to cart »).

className
string
—

Classes additionnelles sur la racine (ex. max-w-xs).

Props

Preview

MerchCard

Prop
Type
Required
Default
Description
id
string
Required
—

Unique per-card id; anchors the aria-labelledby wiring (merch-${id} on the article and the h3 title). Must be unique per rendered card on the page.

title
string
Required
—

Product title, rendered as the h3 heading that labels the article.

artist
string
Optional
—

Optional artist/maker attribution line under the title (muted). Omit to hide.

price
string
Required
—

Pre-formatted price string (e.g. « 35,00 $ ») rendered verbatim in tabular-nums — the organism does no currency formatting.

imageUrl
string
Required
—

Square product image source URL (rendered aspect-square, loading=lazy).

imageAlt
string
Required
—

Image alt text — describe the product, not « image of » (WCAG 1.1.1).

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

Switches the add-to-cart button label (fr « Ajouter au panier » / en « Add to cart »).

className
string
Optional
—

Extra classes appended to the root article (layout sizing, e.g. max-w-xs).

Quick use:<MerchCard />

Accessibility

ARIA rolearticle

ARIA

2 rules

WCAG 1.3.1

Article labelled by its title heading: aria-labelledby="merch-${id}" on the root article pointing at the h3 id — id must be unique per rendered card

WCAG 1.1.1

Product image requires descriptive alt text via the imageAlt prop (no decorative empty alt — it is the product visual)

Contrast

2 rules

WCAG 1.4.3

Artist line: text-muted on surface-card — 5.25:1 light / 4.76:1 dark (token hex measured; dark ratio documented in globals.css)

WCAG 1.4.3

Title/price: text-heading on surface-card — 15.09:1 light / 12.84:1 dark. CTA: white on btn-primary 5.70:1, hover 8.26:1 light / 4.64:1 dark — theme-stable AA

i18n

1 rule

DS i18n convention (locale prop)

Built-in strings switch FR/EN via the locale prop (Ajouter au panier / Add to cart); price is a caller-pre-formatted string rendered verbatim

tap

1 rule

WCAG 2.5.5

CTA uses the DS Button atom (size sm) whose min-height is pinned to --ep-tap-min 44px

Usage

Import

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

Example 1

tsxSnippet
<MerchCard id="tee-osheaga" title="T-shirt Osheaga 2026" artist="Osheaga" price="35,00 $" imageUrl="/img/tee.jpg" imageAlt="T-shirt noir avec le logo Osheaga 2026" />

Example 2

tsxSnippet
<MerchCard {...props} locale="en" className="max-w-xs" />

Anti-patterns

— Do not expect onAddToCart/maxQty callbacks or a quantity selector — the item/onAddToCart/maxQty API was a franken-catalog artifact, never implemented (removed from catalog + docs 2026-09-14)

— Do not pass raw numbers to price — pre-formatted strings only, the caller owns currency formatting

— Do not reuse the same id across cards on one page — merch-${id} anchors aria-labelledby wiring and DOM ids must be unique

Design System v4.1.0 | ePassLive