Composants
Card
Le conteneur de regroupement. Trois variantes de surface et quatre pas d'espacement pour cadrer
du contenu — d'une tuile KPI cliquable à un simple bloc discret. Rayon de conteneur
--radius-container (12 px).
import { Card } from "@forme-ch/ui/controls";
<Card variant="surface">…</Card>
<Card variant="quiet">…</Card>
<Card variant="outline">…</Card>Espacement
La prop padding couvre none, sm, md (défaut) et lg.
<Card padding="none">…</Card>
<Card padding="sm">…</Card>
<Card padding="md">…</Card>
<Card padding="lg">…</Card>Carte interactive
isInteractive active les états hover/focus et le curseur pointeur ; combine-le avec onClick.
<Card variant="surface" padding="lg" isInteractive onClick={open}>
…
</Card>Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
children | ReactNode | — | Contenu de la carte. |
variant | CardVariant | "surface" | surface (pleine) · quiet (fond discret) · outline (bordure seule). |
padding | CardPadding | "md" | none · sm · md · lg — pas d'espacement mappés sur les SpacingStep Astryx. |
isInteractive | boolean | — | Ajoute hover/focus et cursor: pointer pour une carte cliquable (KPI, ligne). |
onClick | () => void | — | Gestionnaire de clic (généralement combiné à isInteractive). |
className | string | — | Classe CSS additionnelle. |
style | CSSProperties | — | Styles inline (fusionnés après les styles internes). |
Accessibilité
Une carte isInteractive se comporte comme un élément cliquable : elle doit
rester atteignable et actionnable au clavier, et son contenu doit annoncer clairement la destination
ou l'action. Pour une navigation, préfère envelopper un vrai lien plutôt que de reposer sur le seul
onClick.
Do & Don't
✓ À faire
Réserver isInteractive aux cartes réellement cliquables. Utiliser quiet pour regrouper sans surcharger.
✕ À éviter
Imbriquer des cartes surface les unes dans les autres. Mettre onClick sans isInteractive (aucun affordance visuel).