Composant · Structure

Card

Stable

Conteneur de surface élevée avec bordure, rayon, ombre et padding. Rend un `<section>` et expose un slot `children` ; la variante `interactive` ajoute hover (élévation + translation) et curseur pointeur.

Quand l'utiliser

Regrouper visuellement un bloc de contenu autonome (résumé, plan, élément de liste riche).
Utilisez interactive uniquement si toute la carte mène à une action ou une destination.
N'imbriquez pas une carte dans une autre carte.

Exemples

Statique vs interactive (côte à côte)

Carte statique

Surface par défaut, sans effet de survol.

Carte interactive

Élévation et translation au survol.

Voir le code (Svelte)

<Card>
  <h3>Carte statique</h3>
  <p>Surface par défaut, sans effet de survol.</p>
</Card>
<Card interactive>
  <h3>Carte interactive</h3>
  <p>Élévation et translation au survol.</p>
</Card>

Carte avec contenu structuré

Plan Équipe

Quota mensuel partagé, sièges illimités, support prioritaire.

Voir le code (Svelte)

<Card>
  <h3>Plan Équipe</h3>
  <p>Quota mensuel partagé, sièges illimités, support prioritaire.</p>
  <Button variant="primary">Choisir ce plan</Button>
</Card>

Anatomie

Élément racine : un <section> (classe st-card) avec bordure, rayon et ombre.
Contenu : entièrement libre, via le slot children.
Variante interactive : ajoute une élévation et une translation au survol.

Accessibilité

La carte est un <section> neutre : ce n'est pas un contrôle par défaut.
Pour une carte cliquable, câblez role/tabindex/onclick (ou englobez un seul lien/bouton) et assurez un focus visible.
Ne reposez pas l'interactivité sur le seul effet de survol : prévoyez un état focus.

Lignes directrices

À faire

Une seule action principale par carte interactive.
Aligner les cartes sur une grille régulière.

À éviter

Imbriquer des cartes ou empiler des ombres.
Marquer interactive sans cible cliquable réelle.

API

Prop	Type	Default
`interactive`	`boolean`	`false`
`class`	`string`	optionnel
`children`	`Snippet`	optionnel
+ attributs HTMLElement transmis (...rest, ex. onclick, role, id)

Notes d’usage

`interactive` est purement visuel (hover, curseur) : la carte reste un `<section>`. Pour une carte cliquable, câblez l’interaction via les attributs HTML transmis (`...rest`, ex. `onclick`, `role`, `tabindex`).

Tout le contenu passe par le slot `children`. Les cartes ne s’imbriquent pas dans d’autres cartes (anti-pattern proscrit) ; présentez plutôt les variantes côte à côte.

Le composant ne contraint ni la largeur ni la mise en page interne : composez le contenu (titres, texte, actions) à votre gré dans le slot.

Tokens utilisés

--st-component-card-background
--st-component-card-border
--st-component-card-radius
--st-component-card-shadow
--st-component-card-anatomy-states-hover-bg
--st-semantic-surface-raised
--st-semantic-border-subtle
--st-semantic-text-primary
--st-spacing-4
--st-shadow-medium
--st-motion-normal
--st-motion-easing