Composants
Les composants du Système de design GC sont des blocs de construction d'interface utilisateur répondant à différents objectifs. Chaque composant s'accompagne de code réutilisable, de conseils relatifs aux meilleures pratiques et d'astuces en matière d'accessibilité.
Parcourir les composants
Nous proposons de nouveaux composants au fur et à mesure que nous les construisons.
Un message court et bien visible qui fait partie du contenu de la page
Autres noms : Alerte contextuelle
Une barre de navigation latérale consiste en une liste de liens de navigation située du côté gauche de l'écran.
Autres noms : menu latéral, navigation à gauche, navigation verticale
Une barre de navigation supérieure est une liste horizontale de liens de page.
Autres noms : menu du site, navigation, barre de navigation
Un bouton permettant d’afficher le contenu du site en français ou en anglais.
Autres noms : lien pour changer de langue.
Un objet interactif mettant l'accent sur une action.
Autres noms : appel à l'action.
Un groupe de boutons radio permet de proposer plusieurs options de réponse pour un choix unique.
Autres noms : case d'option, radio.
Un encadré contenant du contenu structuré et exploitable sur un sujet unique.
Autres noms : tuile, carte de contenu.
Cases qui permettent la sélection d'une ou plusieurs options.
Autres noms : liste de contrôle, liste de vérification.
Le champ de date est un espace permettant de saisir une date connue.
Autres noms : date, zone de date, date connue.
Un espace où saisir des renseignements brefs.
Autres noms : saisie de texte, champ de texte.
Un chemin d'accès à la page actuelle à partir de chaque niveau précédent de la hiérarchie du site.
Autres noms : fil d'ariane.
Un conteneur est une mise en page simple en forme de boîte avec une largeur de contenu fixe.
Autres noms : boîte, encadré.
Horodatage de la dernière mise à jour d'une page.
Autres noms : dernière mise à jour, version.
Une bascule interactive permettant de dissimuler ou d'afficher du contenu.
Autres noms : accordéon, développer/réduire.
L'en-tête portant l'image de marque du gouvernement du Canada.
Autres noms : en-tête global.
Une grille est une mise en page réactive et flexible.
Autres noms : mise en page, colonnes, disposition en colonnes, boîte de style grille.
Un symbole qui représente une action ou une idée.
Autres noms : symbole, glyphe.
Un suivi de l'avancement pour un processus en plusieurs étapes.
Autres noms : indicateur de progrès, étapes.
Un groupe de plusieurs éléments de formulaire.
Autres noms : champ de formulaire.
Un lien est un élément de navigation qui amène une personne à une nouvelle page, à un autre site Web, à un fichier ou à une nouvelle section de la page actuelle.
Autres noms : ancre, lien hypertexte, appel à l'action.
Le masquage accessible est une façon de rendre l'information textuelle uniquement accessible à des technologies d'assistance.
Autres noms : masquage visuel, lecteur d'écran uniquement.
Le menu thématique est un mécanisme de navigation vers les tâches les plus importantes des sites Web du gouvernement du Canada.
Autres noms : navigation globale, navigation par thème.
Une description d'un problème représentant un obstacle à un objectif utilisateur.
Autres noms : indication d'erreur.
Un sélecteur de page pour naviguer dans une série de page.
Autres noms : navigation entre les pages.
Le pied de page portant l'image de marque du gouvernement du Canada.
Autres noms : pied de page du site.
Un espace où entrer des mots clés pour chercher des renseignements pertinents.
Autres noms : barre de recherche, boîte de recherche sur le site, champ de recherche.
Un résumé des erreurs consiste en une liste des erreurs de saisie dans un formulaire.
Autres noms : liste d'erreurs.
L'image de marque pour le gouvernement du Canada.
Autres noms : signature du GC.
Une liste d'options permettant de choisir une option unique.
Autres noms : menu déroulant, menu de sélection.
Le composant texte est un paragraphe stylisé et formaté qui affiche du contenu écrit de manière accessible.
Autres noms : bloc de texte, version, légende, corps du texte, paragraphe.
Un titre établit les niveaux d'une structure hiérarchique pour organiser le contenu d'une page.
Autres noms : titre de la section, sous-titre.
Un sélecteur de fichier pour le transfert de fichiers.
Autres noms : saisie de fichier, zone de dépôt.
Un espace où saisir des renseignements détaillés.
Autres noms : champ de texte.
Nous travaillons peut-être à développer le composant que vous recherchez.
Sinon, vous pouvez utiliser nos Raccourcis CSS pour combler les lacunes. Ceux-ci permettent d’appliquer les styles de Système de design GC à votre code personnalisé.
Parcourir les Raccourcis CSS
Les composants « Requis sur Canada.ca » vous aident à respecter les normes du gouvernement fédéral canadien en matière d'identité, quel que soit votre produit.
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
2025-07-30