Design system
Jetons, composants Astro et contrôles de qualité, publiés en paquets npm.
Card
À quoi il sert
Card regroupe un titre, un texte, un média et un pied de carte, avec un seul lien qui couvre toute la carte.
Quand l’utiliser
- Présenter un projet, un article ou une ressource dans une liste de cartes.
- Ajouter des étiquettes ou des liens secondaires dans le slot footer.
Quand ne pas l’utiliser
- Pour une action sans destination : utiliser Button.
- Pour regrouper des contenus longs : un titre de section et du texte suffisent.
Exemples
Carte sans lien
Sans href, la carte n’est pas cliquable et ne reçoit pas le focus.
Carte avec pied
Le lien du pied de carte reste utilisable au-dessus du lien de la carte.
<Card title="Design system" href="/projets/design-system">
<p>Jetons, composants Astro et contrôles de qualité.</p>
<a slot="footer" href="/etiquettes/astro">Astro</a>
</Card>
<Card title="Sans lien" headingLevel={4}>
<p>Carte non cliquable.</p>
</Card>Variantes
Niveau 2
Titre de niveau 2.
Accessibilité
Clavier
- Avec href, la carte compte un seul arrêt de tabulation : le lien du titre.
- Les liens du slot footer ont leur propre arrêt de tabulation.
- Entrée active le lien ; le composant ne gère aucune autre touche.
Lecteur d’écran
- Le titre est un titre de section (h2, h3 ou h4) ; le lien porte son texte comme nom.
- La carte est un article sans rôle ajouté.
Garanti par le composant
- Le focus du lien est visible sur toute la carte, par un anneau de 2 px (WCAG 2.4.7).
- Le lien est souligné : la couleur n’est pas seule à le signaler (WCAG 1.4.1).
- La zone cliquable couvre la carte, au-delà de 24 px de côté (WCAG 2.5.8).
- Le titre est un vrai titre, donc repérable dans la structure (WCAG 1.3.1).
À la charge de l’intégrateur
- Choisir headingLevel selon la hiérarchie de la page, sans sauter de niveau.
- Donner un titre unique à chaque carte : il sert de nom au lien.
- Ne pas placer de lien ou de bouton dans le slot par défaut ni dans media.
- Fournir un texte alternatif aux images du slot media.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| title (obligatoire) | string | — | Titre de la carte, rendu dans un titre de section et nom accessible du lien. |
| href | string | — | Adresse du lien unique. Sans elle, la carte n'est pas cliquable. |
| headingLevel | 2 | 3 | 4 | — | Niveau du titre (2, 3 ou 4), à choisir selon la hiérarchie de la page. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-accent--pp-color-fg--pp-color-focus--pp-color-line--pp-color-surface--pp-font-line-height-heading--pp-font-size-0--pp-font-weight-bold--pp-radius-control--pp-radius-surface--pp-size-focus-offset--pp-size-focus-width--pp-size-rule--pp-size-target-min--pp-space-2xs--pp-space-3xs--pp-space-s--pp-space-xs--pp-z-sticky
Preuves et décisions
- WCAG 2.4.7 Focus visible
- WCAG 1.3.1 Information et relations
- WCAG 2.5.8 Taille de la cible (minimum)
- Tests : packages/astro/test/Card.test.ts