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

Structure de la carte

1. La boîte contient tous les éléments d'une carte.
2. Le badge (facultatif) est un indicateur visuel renseignant sur l'état ou la catégorie de la carte. Le texte du badge ne devrait pas dépasser 20 caractères.
3. L'image (facultative) a un format de 1:1, 16:9 ou 4:3.
4. Le titre est court et attire l'attention sur le sujet du contenu de la carte.
5. La description (facultative) contient du texte destiné à accompagner le titre. Elle résume en quelques lignes le sujet de la carte ou affiche une liste de renseignements sur un même sujet, comme les informations sur un évènement.

Design et accessibilité des cartes

Écrivez un titre facile à parcourir

• Utilisez un titre qui informe les personnes sur le contenu de la carte.
• Choisissez une brève description ou un appel à l'action pour le titre.

Choisissez les renseignements à ajouter à la carte

• Envisagez d'ajouter une image reflétant le titre pour rendre les cartes plus reconnaissables.
• Envisagez d'ajouter une description pour fournir plus d'informations sur le sujet de la carte.
• Envisagez d'ajouter un badge pour renseigner les personnes sur l'état ou la catégorie du contenu 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'ordinateur, 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.