Tuiles cliquables
Les tuiles cliquables sont des éléments de navigation mis en évidence.
Exemple
Quand l'utiliser
Le composant tuile cliquable est un élément de navigation ayant un fort impact visuel, utilisé lorsqu’on souhaite attirer l’attention de l'utilisateur sur certains éléments de navigation. La tuile augmente le repérage visuel de l'information.
Le composant est principalement utilisé dans des pages de navigation situées au début du parcours de l’utilisateur. La tuile cliquable est complémentaire à la navigation en place. Dans le cas d’un site Internet ou d’un service en ligne qui comporte peu de sections (entre 2 et 6), le composant peut être exceptionnellement utilisé comme navigation principale.
Sur le site Québec.ca, les tuiles sont exclusivement utilisées dans un contexte de pages de campagne. Pour plus d’informations, consultez les orientations sur les éléments autorisés pour un rappel de campagne 
.
Comment l'utiliser
Le composant peut être utilisé de deux façons :
- Pour les éléments de navigation importants (avec la tuile cliquable standard).
- Pour les éléments d’un second niveau d’information (avec la tuile cliquable simple).
Dans le format bureau, la tuile standard comprend obligatoirement:
- un titre clair d’un maximum de 45 caractères;
- un texte faisant la description de son contenu;
- une icône de flèche au survol.
Il est aussi recommandé de mettre une icône en lien avec le contenu, mais celle-ci est optionnelle.
Exemple
La tuile simple comprend les mêmes éléments que la version standard à l'exception du texte de description qui est retiré.
Exemple
Dans le format mobile, les contenus des tuiles restent les mêmes que ceux dans le format bureau, mis à part que la flèche est présente par défaut et non seulement au survol.
Tuile standard - Format mobile
Tuile simple - Format mobile
Il est fortement suggéré de prévoir un seul groupe de tuiles dans une page, et de le placer sur un fond de couleur afin d'accentuer son impact et son repérage visuel.
Exemple
Le type de contenu d’une tuile est limité aux éléments décrits ci-dessus. Il n’est pas possible d’y insérer une image, seule une icône peut être ajoutée pour représenter la nature du contenu. De plus, aucun autre composant n’est permis, tel que les boutons ou des éléments de formulaires.
À ne pas faire
Informations techniques
Dimensions
Dans le format bureau, la largeur des tuiles est variable selon la grille utilisée. Elle peut prendre 3 ou 4 colonnes de large selon la grille.
La hauteur des tuiles est dépendante de son contenu. Par contre, toutes les tuiles d’un même groupe doivent être de la même hauteur, en se basant sur la tuile la plus haute.
À faire
À ne pas faire
Dans le format mobile, la hauteur du composant reste variable de son contenu. Pour la largeur de la tuile, elle doit prendre celle de toute la grille.
L’icône est d’une dimension de 40 px en hauteur et en largeur. La flèche est de 11 px de largeur par 12 px de hauteur.
Espacements
Dans le format bureau, le dégagement dans la tuile standard est de 32 px en haut et de 24 px en bas, à droite et à gauche du contenu.
Le dégagement entre le texte de description et la flèche de survol est de minimum 4 px. La flèche est toujours située dans le coin inférieur droit de la tuile, tout en respectant le dégagement.
Le dégagement dans la tuile simple est de 32 px en haut et de 24 px pour tous les autres côtés. Aussi, l’espace entre l’icône et le titre est de 8 px.
Le dégagement de la tuile standard dans le format mobile est le même que celui dans le format bureau.
Pour la tuile simple, dans le format mobile, le dégagement est de 24 px de tous les côtés.
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.
Variantes de tuile
Tuiles standards
Tuiles simples
États
CSS de la tuile par défaut
border: 1px solid #c5cad2;
background-color: #ffffff;
box shadow: 0px 1px 4px rgb(34, 54, 84, 0.24);
CSS du survol
border: 1px solid #1472bf;
box-shadow: 0px 2px 8px rgb(34, 54, 84, 0.24);
CSS du contenu
font-family: Open Sans;
font-weight: Regular;
font-size: 14px;
color: #223654;
CSS de la flèche
color: #e58271;
CSS du titre
font-family: Open Sans;
font-weight: Bold;
font-size: 18px;
color: #223654;
Dernière mise à jour : 2 avril 2024