Carte
`<gcds-card>`

Autres noms : tuile, carte de contenu.

Une carte est un conteneur présentant des renseignements structurés sur un sujet et permettant d'accéder au contenu associé.

GitHub
Figma

Aperçu du composant de carte

Sur cette page

Codage et accessibilité des cartes
Exemples
Générateur de code

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.

Exemples

Explorez les différentes façons de configurer le composant. Chaque exemple présente une mise en œuvre fonctionnelle et du code prêt à copier.

Attributs essentiels

Ces attributs sont requis pour que le composant fonctionne correctement.

`card-title`

L’attribut card-title définit le titre affiché sur la carte.

<gcds-card
  card-title="Titre de la carte"
  href="#"
></gcds-card>

`href`

L’attribut href précise l’URL de la page vers laquelle pointe le lien.

<gcds-card
  card-title="Titre de la carte"
  href="#"
></gcds-card>

Attributs facultatifs

Ces attributs vous permettent de personnaliser ou d’enrichir le comportement et la présentation du composant.

`badge`

L’attribut badge définit le texte du badge qui apparaît dans le coin supérieur gauche de la carte. Le badge est limité à 20 caractères.

<gcds-card
  card-title="Titre de la carte"
  badge="Balise"
  href="#"
></gcds-card>

`card-title-tag`

L’attribut card-title-tag définit l’élément de titre HTML pour le titre de la carte. Cette propriété ne modifie pas la taille de la police. Utilisez-la pour assigner un niveau de titre approprié et maintenir la hiérarchie des titres et l’accessibilité. Les options sont :

h3
h4
h5
h6

<gcds-card
  card-title="Titre de la carte"
  card-title-tag="h3"
  href="#"
></gcds-card>

`description`

L’attribut description définit le texte qui apparaît sur la carte.

<gcds-card
  card-title="Titre de la carte"
  href="#"
  description="Description destinée à accompagner le titre."
></gcds-card>

`img-alt`

L’attribut img-alt définit le texte alternatif de l’image fournie. S’il n’est pas défini, l’image est considérée comme décorative.

<gcds-card
  card-title="Titre de la carte"
  href="#"
  img-alt="Le composant Carte montre un encadré contenant une image rectangulaire dans la moitié supérieure. Juste en dessous se trouve une barre bleue rectangulaire occupant les trois quarts de la largeur de l'encadré et représentant le titre de la carte. Encore en dessous, deux barres grises plus longues l'une au-dessus de l'autre représentent respectivement la zone consacrée au contexte et la zone consacrée aux métadonnées."
  img-src="/images/common/components/preview-card.svg"
></gcds-card>

`img-src`

L’attribut img-src définit l’URL ou le chemin d’accès de l’image à afficher.

<gcds-card
  card-title="Titre de la carte"
  href="#"
  img-alt="Le composant Carte montre un encadré contenant une image rectangulaire dans la moitié supérieure. Juste en dessous se trouve une barre bleue rectangulaire occupant les trois quarts de la largeur de l'encadré et représentant le titre de la carte. Encore en dessous, deux barres grises plus longues l'une au-dessus de l'autre représentent respectivement la zone consacrée au contexte et la zone consacrée aux métadonnées."
  img-src="/images/common/components/preview-card.svg"
></gcds-card>

`rel`

L’attribut rel définit la relation entre le document actuel et le document lié. Il est souvent utilisé pour des raisons de sécurité et de confidentialité, notamment lorsque les liens s’ouvrent dans un nouvel onglet ou une nouvelle fenêtre.

<gcds-card
  card-title="Titre de la carte"
  href="#"
  rel="noopener noreferrer"
></gcds-card>

`target`

L’attribut target définit où s’ouvre le lien. Par exemple, il peut ouvrir le lien dans le même contexte de navigation ou dans un nouvel onglet ou une nouvelle fenêtre.

<gcds-card
  card-title="Titre de la carte"
  href="#"
  target="_blank"
></gcds-card>

Emplacements (slots)

L’emplacement par défaut vous permet d’injecter du contenu personnalisé dans la zone de contenu principale du composant, et les emplacements nommés, dans des zones spécifiques.

`default`

L’emplacement par défaut sert à ajouter du contenu descriptif à la carte. Il remplace l’attribut description s’il est utilisé.

<gcds-card card-title="Titre de la carte" href="#">
  Description destinée à accompagner le titre.
</gcds-card>

Générateur de 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.

Choisissez des valeurs de code pour obtenir l'élément que vous voulez.
Obtenez le code et intégrez-le dans votre environnement.
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.

Aidez-nous à nous améliorer

Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact.

Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes.

Fournir des commentaires

Signaler un problème sur GitHub

2026-05-20

Carte<gcds-card>

Aperçu du composant de carte

Sur cette page

Codage et accessibilité des cartes

Écrivez un titre facile à parcourir

Sélectionnez le bon niveau de titre

Ajoutez une description pour fournir plus d’informations

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

Regroupez les cartes pour assurer une cohérence visuelle

Utilisez des propriétés valides

Exemples

Dans cette section

Attributs essentiels

card-title

href

Attributs facultatifs

badge

card-title-tag

description

img-alt

img-src

rel

target