- Accueil
- Design
- Composants
- Navigation
- Tuiles cliquables
Tuiles cliquables
Les tuiles cliquables sont des éléments de navigation mis en évidence.
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 ».
Variantes disponibles
Deux variantes sont offertes pour s’adapter à l’importance de l’information à mettre en valeur :
- Tuile standard : Contient un texte descriptif sous le titre de tuile.
- Tuile simple : Ne contient pas de texte descriptif sous le titre de tuile.
De plus, une icône facultative peut être ajoutée.
Quand l’utiliser
Le composant est conçu pour mettre en valeur certains éléments de navigation importants dans une page.
Il facilite le repérage visuel, notamment en début de parcours utilisateur. Il peut exceptionnellement servir de navigation principale dans un contexte où le nombre de tuiles cliquables est limité (entre deux et six).
Sur le site Québec.ca, les tuiles sont utilisées uniquement dans les pages de campagne. Voir les orientations sur les
Quand ne pas l’utiliser
Il n’est pas autorisé d’utiliser les tuiles cliquables uniquement pour styliser la navigation avec des icônes, car il peut être difficile de trouver des icônes vraiment appropriées et efficaces. Pour les considérations liées à l’usage des icônes (pertinence, clarté, accessibilité), consulter la page Iconographie.
La tuile cliquable est exclusivement destinée à la navigation. Elle ne doit pas être utilisée pour intégrer des images, des boutons ou d’autres éléments interactifs comme des champs de formulaire, puisque toute la surface de la tuile est déjà cliquable. Ajouter d’autres éléments cliquables causerait des conflits d’interaction.
Toute la surface de la tuile constitue une zone interactive. Cela signifie que l’ensemble des éléments visibles (titre, texte descriptif, icône, flèche) sont intégrés dans un même lien. Il ne doit donc pas y avoir d’autres éléments cliquables à l’intérieur. Si tel serait le besoin, il est préférable d’opter pour un autre composant ou de structurer l’information à l’aide d’encadrés et d’un assemblage de bases et de composants.
Anatomie
- Icône
Facultative - Titre de tuile
- Texte descriptif
Absent dans la tuile simple - Flèche
- Zone cliquable
Contenus
Cette section définit les règles et contraintes sur les types de contenus (textuels, graphiques, interactifs, etc.) acceptés par chaque élément du composant.
Groupe de tuiles cliquables
Il est recommandé d’utiliser un seul groupe de tuiles par page et de les positionner sur un fond coloré pour renforcer leur impact visuel.
Un titre de tuile et un texte descriptif doivent toujours se trouver au-dessus des tuiles cliquables, dans le conteneur du groupe de tuiles, sauf lorsque les tuiles servent de navigation principale. Dans ce cas, le groupe est positionné plus haut dans la page et aucun contenu ne le précède.
Icône (facultative)
Les tuiles peuvent contenir une icône facultative permettant d’illustrer le sujet du contenu. Celle-ci doit respecter le style graphique du système de design et s’intégrer harmonieusement au reste du contenu. L’utilisation d’une icône doit être justifiée par sa pertinence. Voir les principes d’accessibilité et les recommandations sur l’usage des icônes dans la section Iconographie.
Tuiles cliquables (complètes)
Le type de contenu d’une tuile est limité aux éléments décrits ci-dessous. Il n’est pas possible d’y insérer une image autre que l’icône prévue pour représenter la nature du contenu.
De plus, aucun autre composant n’est permis, tels que les boutons ou des éléments de formulaires.
La tuile standard contient les éléments suivants :
- Un titre de tuile (maximum 45 caractères)
- Un texte descriptif (entre 80 et 140 caractères pour assurer une bonne lisibilité et un bon équilibre visuel)
- Une flèche de navigation (au survol ou persistante en mobile)
- Une icône facultative en lien avec le contenu
La tuile simple contient les éléments suivants :
- Un titre de tuile (maximum 45 caractères)
- Une flèche de navigation (au survol ou persistante en mobile)
- Une icône facultative en lien avec le contenu
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 les trousses de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Tuiles cliquables (complètes)
Positionnement et alignement : La flèche est positionnée dans le coin inférieur droit.
Dimensions : Au format bureau, leur largeur est contenu dans une grille de 3 ou 4 colonnes et leur hauteur est adaptée au contenu, mais toutes les tuiles d’une même rangée doivent avoir la même hauteur. Au format mobile, la largeur est pleine et la hauteur est adaptée au contenu.
Espacements : L’espacement entre les tuiles dans le format bureau est de 32 px verticalement. L’espace horizontal s’ajuste selon la grille utilisée. Pour les tuiles dans le format mobile, l’espacement vertical entre elles est de 24 px.
Titre de tuile
Positionnement et alignement : Dans la tuile simple sans icône, le titre de tuile est centré autant verticalement qu’horizontalement, sauf en format mobile où il reste aligné à gauche. Dans la tuile simple avec icône, l’icône est positionnée au-dessus du titre de tuile et les deux sont centrés verticalement. Dans ce cas, l’alignement horizontal de l’icône et du titre de tuile est fait par le haut.
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.
Tuiles cliquables (complètes)
Au survol, la flèche apparaît (au format bureau, car la flèche est toujours visible en format mobile).
Au clic, la navigation se fait vers la page cible.
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 :
- Survol de la tuile : flèche visible
- Clic sur la tuile : activation du lien
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Touche Tab : mise au focus de la tuile
- Entrée ou Espace : activation du lien
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le
- 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 : 7 octobre 2026