Composant modulaire : l'ensemble de la tuile-ci est cliquable. Elle existe en affichage vertical ou horizontal dans deux tailles : MD et SM. En desktop, la taille SM occupe un maximum de 3 colonnes tandis qu’en MD, elle occupe entre 4 à 6 colonnes. Côté mobile, les deux tailles occupent l’intégralité de la largeur de la grille.

Taille MD

Taille SM

Structure

Elle se compose des éléments suivants :

• un titre - obligatoire
• une description - optionnel
• un détail - optionnel
• une icône ou un pictogramme uniquement (jpg, png, svg ,etc ..) - optionnel
• un badge - optionnel

Règles d’utilisation

Usages

• Bien que la hauteur de la tuile s’adapte à son contenu, sa la largeur est elle définie selon la grille.
• Au sein d’une liste de tuile, il faut veiller à harmoniser la hauteur des tuiles par ligne en prenant comme référence, la plus importante comme référence.
• Au sein d’une même liste ou collection, une tuile doit avoir la même structure d’une tuile à l’autre.

Attention :

• Les tuiles ne doivent pas être utilisées pour créer des aperçus du contenu de la page à laquelle elle renvoie.
• Elles ne doivent pas non plus être utilisées pour mettre en avant l’action principale d’une page.

Contenus

• Les titres et descriptions doivent être synthétiques.
• Dans la mesure où les tuiles sont présentés dans des listes/collection, il est nécessaire d'éviter les redondances et d’avoir un contenu distinct pour chaque tuile. Ainsi, il faut éviter de réutiliser plusieurs fois la même icône ou le même pictogramme.
• Attention à utiliser des icônes et pictogrammes correctement dimensionnées et qui s’adaptent au différents types d’affichage responsive.

Personnalisation