Composants
À consulter aussi
Le bloc « À consulter aussi » propose des éléments d’information qui complètent le contenu principal. Les éléments d’informations supplémentaires sont sous forme de liens qui peuvent mener vers des pages internes ou externes ou encore ouvrir des documents.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Quand l’utiliser
Le composant « À consulter aussi » sert à diriger le citoyen vers de l’information qui complète le contenu principal.
Quand ne pas l’utiliser
Si le citoyen doit absolument avoir accès aux informations que l’on souhaite ajouter dans ce bloc pour comprendre le contenu principal, il ne faut pas utiliser le bloc « À consulter aussi », mais plutôt contextualiser ces éléments dans le contenu de la page.
Anatomie
- Titre de la section
- Liste de liens
- Liens vers un document
- Filet principal
- Filets secondaires
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Titre de la section
Le libellé « À consulter aussi » est le seul libellé possible.
Liste de liens et liens vers un document
Le nombre maximal de liens permis dans une page est de 7. Il est fortement déconseillé de dépasser ce nombre pour éviter de surcharger la page.
Les liens peuvent :
- mener vers des pages internes ;
- rediriger vers des pages externes ;
- ouvrir des documents.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
À consulter aussi (complet)
Positionnement et alignement : Le bloc est situé au bas de la page, immédiatement après le contenu principal.
Dimensions : Le bloc occupe 100 % de la largeur de la zone de contenu, dont la limite est 825 px de large.
Espacements : Un espacement vertical de 72 px est appliqué au-dessus du bloc pour marquer clairement la transition entre la fin du contenu principal et le début de ce bloc.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Liste de liens et liens vers un document
Les liens internes et les documents s’ouvrent habituellement dans le même onglet. Les liens externes s’ouvrent plutôt dans un nouvel onglet.
Lorsque le lien s’ouvre dans un nouvel onglet, il est accompagné du texte alternatif suivant : Cet hyperlien s’ouvrira dans une nouvelle fenêtre.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur un lien ou document pour ouvrir la ressource.
- Survol : affichage d’un soulignement ou changement de couleur pour indiquer l’interactivité.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Navigation possible via la touche Tab pour passer d’un lien à l’autre.
- Activation d’un lien ou document avec la touche Entrée ou Espace.
Mises à jour
Cette section présente la disponibilité actuelle des différentes versions du composant ainsi qu'un aperçu des changements passés.
| Emplacement | Statut |
|---|---|
| Trousse de design Adobe XD | Disponible |
| Trousse de design Figma | Disponible |
| Trousse de développement | À venir |
| Québec.ca (TYPO3) | Disponible |
| Date | Description |
|---|---|
| 13 août 2025 | Simplification et standardisation de la structure de la fiche |
| 11 août 2023 | Visuel mis à jour |
| 27 février 2023 | Modification de la section Comment l'utiliser |
| 9 juillet 2021 | Mise en ligne de la fiche |
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026