1. Accueil  
  2. Composantes  
  3. Navigation  
  4. Tuiles cliquables

Tuiles cliquables

Les tuiles cliquables sont des éléments de navigation mis en évidence.

Exemple


Quand l'utiliser

La composante 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.

La composante est principalement utilisée dans des pages de navigation situées au début du parcours de l’utilisateur. Idéalement, la tuile cliquable est complémentaire à la navigation en place, mais il est possible que dans certains cas elle soit utilisée comme navigation principale.

Comment l'utiliser

La composante peut être utilisée 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 toujours un titre clair, un texte faisant la description de son contenu et une icône de flèche au survol. Il est aussi recommandé de mettre une icône en lien avec le contenu, mais celui-ci est optionnel.

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 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, aucune autre composante n’est permise tels 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 de la composante 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 32px 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 horizontalement. L’espace vertical s’ajuste selon la grille utilisée.

Pour les tuiles dans le format mobile, l’espacement horizontal 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(24, 54, 84, 0.24)

CSS du survol
border: rgb(9, 87, 151, 0.72)
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 : 18 août 2022