Tuiles

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 md de la tuile
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

Élément
Valeur par défaut
Valeur(s) autorisée(s)
Token Classe css
Bordure $border-plain-grey
Correspondance :
Thème clair = $grey-925
Thème sombre = $grey-125
$[couleur]-main (thèmes clair / sombre)
exemples :
green-emeraude-main-632
brown-caramel-main-648







.fr-table--[couleur]
.fr-table--green-emeraude
.fr-table--brown-caramel
Fond (1) $background-alt-grey
Correspondance :
Thème clair = $grey-975
Thème sombre = $grey-75
$[couleur]-975  (thème clair)  
$[couleur]-75  (thème sombre)
exemples:
green-emeraude-950 /
green-emeraude-100

brown-caramel-950 /  
brown-caramel-100


Fond (2) $background-contrast-grey
Correspondance :
Thème clair = $grey-950
Thème sombre = $grey-100
$[couleur]-950  (thème clair)
$[couleur]-100  (thème sombre)
exemples:
thème clair = green-emeraude-950   
thème sombre = green-emeraude-100

thème clair = brown-caramel-950
thème sombre = brown-caramel-100