Card

Conteneur visuel pour regrouper des informations liées. 3 variantes, 4 paddings, slots header/body/footer avec séparateurs automatiques. Non interactif par défaut. Visual container for grouping related information. 3 variants, 4 paddings, header/body/footer slots with automatic separators. Non-interactive by default.

VariantesVariants

Trois variantesThree variants

default Bordure fine, usage général.Thin border, general use.

elevated Ombre portée, mise en avant.Drop shadow, highlighted.

flat Fond subtil, sections secondaires.Subtle background, secondary sections.

SlotsSlots

Slot	ComportementBehavior
`header`	Séparateur bas automatique si contenu présentAutomatic bottom separator if content present
(défaut)(default)	Corps de la carteCard body
`footer`	Séparateur haut automatique si contenu présentAutomatic top separator if content present

PaddingPadding

ValeurValue	TokenToken	UsageUsage
`none`	`0px`	Médias plein-bord, listes sans paddingFull-bleed media, lists without padding
`sm`	`primitive.space.3`	Espaces contraintsConstrained spaces
`md`	`semantic.space.layout.component`	Défaut — usage généralDefault — general use
`lg`	`primitive.space.6`	Contenu spacieux, formulairesSpacious content, forms

Tokens de composantComponent tokens

Token CSS	RéférenceReference	ValeurValue
`--agtc-component-card-default-background`	`semantic.color.background.surface`	#ffffff
`--agtc-component-card-default-border`	`semantic.color.border.default`	#e8e8e8
`--agtc-component-card-default-radius`	`semantic.radius.card`	10px
`--agtc-component-card-default-padding`	`semantic.space.layout.component`	20px
`--agtc-component-card-elevated-shadow`	`semantic.shadow.card`	0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)
`--agtc-component-card-flat-background`	`semantic.color.background.subtle`	#f0f0f0
`--agtc-component-card-padding-none`	`—`	0px
`--agtc-component-card-padding-sm`	`primitive.space.3`	—
`--agtc-component-card-padding-lg`	`primitive.space.6`	—

AccessibilitéAccessibility

Non interactif par défaut — sémantique neutre (<div>)Non-interactive by default — neutral semantics (<div>)
Carte cliquable : encapsuler dans un <a> avec texte accessibleClickable card: wrap in an <a> with accessible text
overflow: hidden — le contenu ne déborde jamais du rayonoverflow: hidden — content never overflows the border radius

ImplémentationImplementation

<!-- Défaut -->
<agtc-card>
  <p>Contenu de la carte.Card content.</p>
</agtc-card>

<!-- Elevated avec header et footer -->
<agtc-card variant="elevated" padding="lg">
  <span slot="header">TitreTitle</span>
  <p>Contenu principal.Main content.</p>
  <div slot="footer">
    <agtc-button variant="primary">ConfirmerConfirm</agtc-button>
  </div>
</agtc-card>

<!-- Flat -->
<agtc-card variant="flat">
  <p>Section secondaire.Secondary section.</p>
</agtc-card>

<!-- Carte cliquable -->
<agtc-card variant="elevated">
  <a href="/detail" style="display:block;text-decoration:none">
    <h3>TitreTitle</h3>
  </a>
</agtc-card>

DOs et DON'TsDOs and DON'Ts

À faireDo

Utiliser padding="none" pour les médias plein-bordUse padding="none" for full-bleed media
Encapsuler dans <a> pour une carte cliquableWrap in <a> for a clickable card
Utiliser slot="footer" pour les actionsUse slot="footer" for actions

À éviterDon't

Carte cliquable sans <a> — non accessibleClickable card without <a> — inaccessible
Fond ou padding en dur — utiliser les attributs variant et paddingHardcoded background or padding — use variant and padding attributes
Variante inventée hors de component.jsonInvented variant outside component.json

UX Patterns Reference

Patterns approved via the ux-pattern-review workflow (ADR-036). Decision: C1, C3, C4 approved + C2 revised.

Pattern	Source	Applied	Justification
Clear visual grouping (clustering) of related content	Dashboard — grouped layout	✅	Component intent
Clickable card — revised rule	Smashing — clickable cards · NN/g	✅ (revised)	See contract below
Hierarchy via elevation/shadow, not color alone	Dashboard — composition	✅	`elevated` variant
Detail-on-demand: the card summarizes, detail opens elsewhere	Dashboard — screenspace	✅	Usage guideline: avoid the card becoming a "container for all detail"

Clickability contract (revised C2)

Card with a single destination → the link covers the entire surface (encompassing

click target, visible focus on the card).

Card with distinct actions (≥ 2 buttons/links) → the card is not a global link:

- either a primary link (the title) extended over the card via an ::after overlay, with secondary buttons placed above it (position: relative; z-index) to remain clickable; - or a non-interactive container where each action has its own <button>/<a>.

Never nest an interactive element inside another one.