AccentCard

Implemented

Theme-aware accent CTA card — light bg-ep-surface-card surface with a decorative left strip in one of the four ADR-031 brand hues (teal/indigo/amber/pink), optional eyebrow/body/CTA (Phosphor arrow, SideCard family norm), and optional promotion to a keyboard-activated button via onClick. Dormant organism (ADR-035) — zero consumers.

Categoryorganisms

Sourcecomponents/organisms/accentcard/AccentCard.tsx

AI HintTone-strip accent CTA card (SideCard family: decorative left strip + optional arrow CTA on bg-ep-surface-card — theme-aware, NOT fixed-dark). Tone is one of the four ADR-031 brand hues (teal/indigo/amber/pink — supersedes pre-ADR-031 blue/rose/navy), decorative only (strip + focus ring, never text) and must attach to a stable identity, never index % 4 cycling (ADR-031 §3). Dormant organism (ADR-035): implemented, tested and barrel-exported but zero consumers. onClick promotes the card to a keyboard-activated button; cta is a label only — the caller localizes FR/EN (no built-in strings).

Carte CTA d'accent s'adaptant au thème (`bg-ep-surface-card`), avec bande latérale décorative dans l'une des quatre teintes de marque ADR-031 (teal, indigo, amber, pink). Dormante (ADR-035) — zéro consommateur à ce jour. FR-CA : « Réservez avant le 15 mars — 20 % sur les laissez-passer ». EN : « Book before March 15 — 20 % off season passes ».

AccentCard

Organism — Storefront family

Carte rectangulaire sur surface `bg-ep-surface-card` (adaptable au thème, PAS un fond sombre fixe) avec bande décorative latérale, sur-titre optionnel, titre, corps optionnel et appel à l'action avec flèche Phosphor décorative. Quatre tons décoratifs (teal, indigo, amber, pink — ADR-031 §1 ; les tons pré-ADR-031 blue/rose/navy sont retirés). Sans `onClick`, la carte est un `<aside>` statique nommé par son titre ; avec `onClick`, elle est promue en bouton activable au clavier (Enter/Espace).

This component supports light and dark mode.

Usage

Utilisez AccentCard dans les zones de héros, les rails promotionnels ou les blocs CTA mis en avant à côté des colonnes de contenu (complément de SideCard). Les tons sont des teintes de marque décoratives (ADR-031) : elles colorent uniquement la bande latérale et l'anneau de focus, jamais le texte, et s'attachent à une identité stable (jamais un cycle index % 4). Pour les états d'erreur, utilisez les jetons sémantiques du DS (p. ex. text-ep-semantic-error), pas un ton d'accent.

Props

Prop

Type

Default

Description

eyebrow

string

—

Sur-titre court (FR-CA) affiché au-dessus du titre.

title*

string

—

Titre principal — nomme la carte statique (aria-labelledby) ou le bouton interactif (repli d'aria-label).

body

string

—

Texte d'appui (1 à 2 phrases).

cta

string

—

Libellé de l'appel à l'action avec flèche Phosphor décorative (aria-hidden). Le libellé est localisé par l'appelant.

tone

'teal' | 'indigo' | 'amber' | 'pink'

teal

Teinte de marque décorative (ADR-031 §1) — colore la bande latérale et l'anneau de focus, jamais le texte ; s'attache à une identité stable, jamais à un cycle index % 4.

size

'sm' | 'md' | 'lg'

md

Densité de la carte — sm p-4 / md p-6 / lg p-8.

onClick

() => void

—

Promeut la carte en bouton activable au clavier (role="button", tabIndex=0, Enter/Espace — R15).

ariaLabel

string

—

Nom accessible personnalisé pour la carte interactive (défaut = titre). Ignoré sur la carte statique.

id

string

—

Id racine — le titre reçoit `${id}-title` (câblage aria-labelledby). Défaut : accentcard-<useId()>.

className

string

—

Classes utilitaires supplémentaires ajoutées après les classes du composant.

Props

Preview

AccentCard

Prop

Type

Required

Default

Description

eyebrow

string

Optional

—

Overline label above the title (e.g. « Nouveau » / « New »).

title

string

Required

—

Card title — names the static aside landmark (aria-labelledby wiring) or the interactive button (aria-label fallback).

body

string

Optional

—

Supporting paragraph below the title.

cta

string

Optional

—

CTA label at the card foot with a decorative aria-hidden Phosphor arrow (family norm — SideCard). Caller localizes (FR/EN) — no built-in strings.

tone

AccentCardTone

Optional

'teal'

Brand accent hue (ADR-031 §1): 'teal' | 'indigo' | 'amber' | 'pink'. Decorative only — colours the left strip and the focus ring, never text; attaches to a stable identity, never index % 4 cycling (ADR-031 §3).

size

AccentCardSize

Optional

'md'

Visual size preset — 'sm' p-4 / 'md' p-6 / 'lg' p-8.

onClick

() => void

Optional

—

Passing onClick promotes the card to a keyboard-activated button (role='button', tabIndex=0, Enter/Space — R15).

ariaLabel

string

Optional

—

Accessible-name override for the interactive card; defaults to title. Ignored when the card is static.

id

string

Optional

auto (`accentcard-<useId()>`)

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

className

string

Optional

—

Extra utility classes appended after the component classes.

Quick use:<AccentCard />

Accessibility

ARIA rolebutton (interactive) / complementary aside named via aria-labelledby (static)

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<AccentCard title="Vendez vos billets en ligne" cta="En savoir plus" tone="amber" />

Example 2

tsxSnippet

<AccentCard eyebrow="Nouveau" title="Programme fidélité" body="Cumulez des points à chaque achat." cta="Découvrir" tone="indigo" onClick={openLoyalty} ariaLabel="Ouvrir le programme fidélité" />

Anti-patterns

— Do not cycle tones with index % 4 over a dynamic collection — tone attaches to a stable identity (ADR-031 §3)

— Do not colour text with the tone hue — the strip and the focus ring are the only tone surfaces (ADR-031 §2)