Composants
Liste de liens-blocs
Les listes de liens-blocs comportent une série d’hyperliens mis en valeur. Ces liens occupent visuellement plus d’espace et ils sont donc plus faciles à taper sur les appareils tactiles. Cela rend le composant « liste de liens-blocs » idéal pour afficher une série de plusieurs hyperliens. Les listes se trouvent dans le contenu principal d’une page et peuvent mener vers des pages internes ou externes.
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
Utiliser des listes de liens-blocs pour présenter aux utilisateurs une liste d'actions recommandées ou du contenu pertinent en fonction du contexte.
Quand ne pas l’utiliser
Pour les pages dont les contenus ne sont pas liés. Cela pourrait prêter à confusion.
Dans un service transactionnel ou un formulaire.
Pour remplacer un menu-ancre et faire des liens vers du contenu sur la même page. Pour cela, il faut utiliser le menu-ancres.
Anatomie
- Libellé du lien
- Icône
- Séparateur
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.
Libellé du lien
Le libellé d’un lien doit être compréhensible hors de son contexte. Les principes de rédaction des libellés doivent être respectés. Ils sont indiqués dans le guide de rédaction.
Si le lien est un lien externe, il doit être suivi d’une icône de sortie et accompagné du texte alternatif suivant : « Cet hyperlien s’ouvrira dans une nouvelle fenêtre. »
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.
Liste de liens-blocs (complète)
Positionnement et alignement : La liste de liens-blocs est placée dans le contenu de la page. Le texte du lien est toujours aligné à gauche.
Dimensions : Les liens-blocs occupent 100 % de la largeur de la zone de contenu, dont la limite est 825 px de large.
Espacements : Il ne doit pas y avoir d’espacement entre les deux liens qui se superposent, et le séparateur entre eux ne doit pas être doublé (les séparateurs doivent se chevaucher ou l’un d’eux doit être supprimé).
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-blocs (complète)
Les liens internes 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 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 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 |
| 17 juin 2022 | 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