Carte
<gcds-card>

Autres noms : tuile, carte de contenu.

La carte est un encadré contenant du contenu structuré et pratique sur un sujet unique.

• GitHub
• Figma

Créer une carte

Utilisez des cartes pour aider une personne à découvrir et à lire en un coup d'œil des résumés ou des éléments progressifs de renseignements sur un même thème.

Codage et accessibilité des cartes

Écrivez un titre facile à parcourir

Utilisez l'attribut card-title pour ajouter un titre court et descriptif à la carte.

Sélectionnez le bon niveau de titre

Utilisez card-title-tag pour définir le bon niveau de titre pour la carte. La définition du niveau adapté pour le titre n'a pas d'incidence sur la taille de la police, mais elle permet de maintenir la bonne hiérarchie et l'accessibilité pour les technologies d'assistance.

Ajoutez une description pour fournir plus d'informations

Ajoutez une description pour fournir plus d'informations sur le sujet de la carte:

• Utilisez l'attribut description pour fournir une description textuelle concise.
• Pour une description avec une mise en forme plus complexe, comme du texte en gras ou en italique, utilisez l'élément slot par défaut de la carte. Évitez d'ajouter des éléments interactifs dans cet emplacement (slot), car ils peuvent entraîner des problèmes d'accessibilité. La carte elle-même est déjà interactive et dirigera la personne au bon endroit.

Utilisez un badge pour afficher l'état ou la catégorie d'une carte

• Utilisez l'attribut badge pour ajouter un état ou une catégorie dans le coin supérieur gauche de la carte.
• Voici des exemples courants d'états : Nouveau, Mis à jour, Bientôt disponible, En vedette.
• Voici des exemples courants de catégories : Vidéos, Articles, Rapports.
• Les badges sont personnalisables mais sont limités à 20 caractères maximum.

Regroupez les cartes pour assurer une cohérence visuelle

Organisez les cartes à l'aide du composant de la grille.

• Pour les écrans d'ordinateurs, utilisez 2 ou 3 cartes par rangée.
• Pour les écrans d'appareils mobiles, utilisez 1 carte par rangée.
• Essayez d'inclure les mêmes propriétés pour chaque carte d'une même section dans une page. Par exemple : si une carte comporte une image, toutes les cartes comportent une image.

Utilisez des propriétés valides

Les propriétés du composant ont une validation intégrée. Les propriétés requises ou susceptibles d'être mal utilisées feront l'objet d'une validation. S'il y a des erreurs de validation, le composant ne fonctionnera pas et ne s'affichera pas. Consultez la console du navigateur pour plus de détails et ajustez les propriétés en conséquence pour que le rendu fonctionne correctement.

Obtenez votre code

Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.

1. Choisissez des valeurs de code pour obtenir l'élément que vous voulez.

2. Obtenez le code et intégrez-le dans votre environnement.

3. Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).

Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.