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.

 

Tuile

La tuile est un composant modulaire. L'ensemble de la tuile est cliquable.

Structure

Elle se compose des éléments suivants

  • d’un titre - obligatoire.

  • d’une image (jpg, png, svg ,etc ..)- optionnelle

  • d’une description - optionnelle.

La tuile existe en affichage vertical ou horizontal.

 

Tuile verticale

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 <!-- Tuile verticale avec description --> <div class="fr-tile fr-enlarge-link"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre MD bold</a> </h4> <p class="fr-tile__desc">Description.</p> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> <!-- Tuile verticale sans description --> <div class="fr-tile fr-enlarge-link"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre MD bold</a> </h4> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> <!-- Tuile verticale sans image et sans desciption --> <div class="fr-tile fr-enlarge-link"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre MD bold</a> </h4> </div> </div> <!-- Tuiles verticales placées dans la grille --> <div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col-6 fr-col-md-4 fr-col-lg-3"> <div class="fr-tile fr-enlarge-link"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre MD bold</a> </h4> <p class="fr-tile__desc">Lorem [...] elit ut.</p> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> <div class="fr-col-6 fr-col-md-4 fr-col-lg-3"> <div class="fr-tile fr-enlarge-link"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre M bold</a> </h4> <p class="fr-tile__desc">Lorem [...] elit ut.</p> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> <div class="fr-col-6 fr-col-md-4 fr-col-lg-3"> <div class="fr-tile fr-enlarge-link"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre M bold</a> </h4> <p class="fr-tile__desc">Lorem [...] elit ut.</p> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> <div class="fr-col-6 fr-col-md-4 fr-col-lg-3"> <div class="fr-tile fr-enlarge-link"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre M bold</a> </h4> <p class="fr-tile__desc">Lorem [...] elit ut.</p> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> </div>

 

Tuile horizontale

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 <!-- Tuile horizontale --> <div class="fr-tile fr-enlarge-link fr-tile--horizontal"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre MD bold</a> </h4> <p class="fr-tile__desc">Texte MD regular 2 lignes max.</p> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> <!-- Tuile horizontale sans image --> <div class="fr-tile fr-enlarge-link fr-tile--horizontal"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre MD bold</a> </h4> <p class="fr-tile__desc">Texte MD regular 2 lignes max.</p> </div> </div> <!-- Tuiles horizontales placées dans la grille --> <div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col-12"> <div class="fr-tile fr-enlarge-link fr-tile--horizontal"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre MD bold</a> </h4> <p class="fr-tile__desc">Lorem [...] elit ut.</p> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> <div class="fr-col-12"> <div class="fr-tile fr-enlarge-link fr-tile--horizontal"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre M bold</a> </h4> <p class="fr-tile__desc">Lorem [...] elit ut.</p> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> <div class="fr-col-12"> <div class="fr-tile fr-enlarge-link fr-tile--horizontal"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre M bold</a> </h4> <p class="fr-tile__desc">Lorem [...] elit ut.</p> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> <div class="fr-col-12"> <div class="fr-tile fr-enlarge-link fr-tile--horizontal"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre M bold</a> </h4> <p class="fr-tile__desc">Lorem [...] elit ut.</p> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" class="fr-responsive-img" alt=""> <!-- L'alternative de l'image (attribut alt) doit à priori rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance. Vous pouvez toutefois remplir l'alternative si vous estimer qu'elle apporte une information essentielle à la compréhension du contenu non présente dans le texte --> </div> </div> </div> </div>

 

 

 

Responsive

En mobile, les tuiles peuvent s’afficher horizontalement ou verticalement

Pour les développeurs

La tuile .fr-tile est verticale par défaut en mobile et desktop. Elle peut devenir horizontale, en mobile et desktop, en rajoutant la classe .fr-tile--horizontal

Il est possible de forcer pour qu’elle soit :

  • verticale à partir du breakpoint md en rajoutant la classe .fr-tile--vertical-md . Cette classe n’est bien entendu utile que si on est dans le contexte d’une tuile horizontale.

  • horizontale à partir du breakpoint md en rajoutant la classe .fr-tile--horizontal-md . Cette classe n’est bien entendu utile que si on est dans le contexte d’une tuile verticale.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!-- Tuile horizontale mobile, verticale > md --> <div class="fr-tile fr-enlarge-link fr-tile--horizontal fr-tile--vertical-md"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre M bold</a> </h4> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" alt=""> <!-- L'alternative de l'image (attribut alt) doit rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance --> </div> </div> <!-- Tuile verticale mobile, horizontale > md --> <div class="fr-tile fr-enlarge-link fr-tile--horizontal-md"> <div class="fr-tile__body"> <h4 class="fr-tile__title"> <a class="fr-tile__link" href>Titre M bold</a> </h4> </div> <div class="fr-tile__img"> <img src="../img/placeholder.1x1.png" alt=""> <!-- L'alternative de l'image (attribut alt) doit rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance --> </div> </div>

 

Règles d’utilisation

Usages

La hauteur de la tuile s’adapte à son contenu. La largeur est elle définie selon la grille .

Au sein d’une liste, il faut veiller à harmoniser la hauteur des tuiles par ligne (prendre la hauteur la plus importante comme référence).

Au sein d’une même liste ou collection, une tuile doit avoir le même nombre d’éléments d’une tuile à l’autre

Les tuiles ne doivent pas être utilisées pour faire des aperçus de contenu, il faut utiliser dans ce cas le composant carte . De même, les tuiles ne doivent pas être utilisées pour mettre en avant l’action principale d’une page. Pour cela, il faut utiliser le composant boutons .

 

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é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 image.

Attention à utiliser des images correctement dimensionnées et qui s’adaptent au différents types d’affichage responsive.

 

Personnalisation

Ce composant n’est pas personnalisable.
Certains éléments sont optionnels et peuvent ou non être affichés - voir structure du composant.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :