Tuile - Tile

La tuile est un raccourci ou point d’entrée qui redirige les utilisateurs vers des pages de contenu. Elle fait généralement partie d'une collection ou liste de tuiles similaires. La tuile n’est jamais présentée de manière isolée.

Structure

Elle se compose des éléments suivants :

  • Une icône ou un pictogramme uniquement (jpg, png, svg, etc), optionnel
  • Un titre reprenant celui de l’objet visé (page de destination, action, site), obligatoire
  • Une description, optionnelle

Exemple d'utilisation

Présentation de la tuile verticale

Utilisation de l'event pour compter

Compteur: {{ compteur }}

Présentation avec des variables laissées vide

Présentation de la tuile horizontale avec id personnalisé

Règles d’utilisation

Usages

  • Bien que la hauteur de la tuile s’adapte à son contenu, sa 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 la plus importante comme référence.
  • Au sein d’une même liste ou collection, toutes les tuiles doivent avoir la même structure.

Attention

  • Les tuiles ne doivent pas être utilisées pour créer des aperçus du contenu des pages vers lesquelles elles renvoies.
  • Elles ne doivent pas non plus être utilisées pour mettre en avant l’action principale d’une page.

Accessibilité

La tuile possède un seul lien dont l’intitulé est explicite : la balise < a > est placée dans la balise titre. La zone de clic pourra être étendue à toute la tuile en css.

Contenus

  • Les titres et descriptions doivent être synthétiques.
  • Dans la mesure où les tuiles sont présentées dans des listes/collections, 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 image.
  • Attention à utiliser des images correctement dimensionnées et qui s’adaptent aux différents types d’affichages responsive.