Composants
Les plus consultés
Le composant Les plus consultés est un ensemble d’étiquettes cliquables regroupées sous un titre. Il permet de rediriger l’utilisateur vers d'autres pages pertinentes en lien avec le contenu de la page actuelle.
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 est utilisé lorsqu’il est jugé pertinent de mettre de l’avant des liens importants dans une page.
Le composant peut être utilisé dans plusieurs types de pages, telles que des pages d'accueil, de thèmes, etc. Par contre, son utilisation doit être faite dans des pages ayant comme fonction la navigation.
Quand ne pas l’utiliser
Si la page est uniquement de type contenu, n’ayant aucunement comme fonction la navigation, l’utilisation du composant est proscrite.
Anatomie
- Libellé « Les plus consultés »
- Groupe d’étiquettes
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é « Les plus consultés »
Par défaut, le composant s’utilise avec le titre « Les plus consultés ». Il est possible de modifier ce titre pour mieux répondre au contexte et au besoin. À noter que le titre doit être uniforme dans l’ensemble du site et qu’il n’est pas possible de faire cohabiter plus d’une formulation.
Groupe d’étiquettes
Lorsque utilisée comme lien dans un contexte de navigation, l’étiquette ne contient pas d’icône de suppression « X ».
Le nombre d’étiquettes maximum dans le composant est de 7 pour éviter de surcharger la page.
La quantité d’étiquettes dépend de la profondeur de la page où se trouve le composant. Les pages plus élevées dans l’arborescence peuvent avoir plus d’étiquettes, tandis que pour les pages plus profondes, il est recommandé de limiter le nombre d’étiquettes.
Pour en savoir plus sur les règles d’usage, consulter la fiche Étiquettes.
Les étiquettes choisies doivent être pertinentes et complémentaires au contenu de la page. Leur sélection peut se baser sur l’un des critères suivants :
- Pages les plus populaires,
- Contenus cycliques, prévisibles ou récurrents, tels que les pneus d’hiver, la chasse sportive ou les inondations.
Il est conseillé d’ajouter manuellement les étiquettes au lieu d’automatiser leur affichage selon le nombre de pages vues.
Les liens dans le composant peuvent mener vers des pages internes, mais aussi vers des liens externes.
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.
Les plus consultés (complet)
Positionnement et alignement : Il est fortement recommandé d’utiliser le composant dans le haut de la page.
Dimensions : Le composant prend un maximum de 825 px de largeur.
Espacements : Un espacement vertical de 40 px est appliqué au-dessus et en dessous du composant pour marquer clairement la transition entre la fin de ce bloc et le début du contenu principal.
Groupe d’étiquettes
Positionnement et alignement : Les étiquettes sont disposées sur une ou plusieurs lignes selon l’espace disponible. Elles s’alignent automatiquement à gauche et passent à la ligne suivante lorsque la largeur de la zone est atteinte.
Dimensions : Les informations techniques spécifiques aux étiquettes se retrouvent dans la fiche Étiquettes.
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 et interaction
Les informations techniques spécifiques aux étiquettes se retrouvent dans la fiche Étiquettes.
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 sur demande |
| Date | Description |
|---|---|
| 13 août 2025 | Simplification et standardisation de la structure de la fiche |
| 24 février 2023 | Modification de la section Comment l'utiliser |
| 12 août 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