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.
La tuile est un composant modulaire. L’ensemble de la tuile est cliquable.
Tuile classique
Tuile verticale avec image, titre et description
Code
= dsfr_tile(title: "Orgue de Fontainebleau",
url: "#",
image_src: "/assets/images/orgue.jpg",
description: "Magistral instrument de musique",
html_attributes: {style: "max-width: 20rem;"})Résultat
Orgue de Fontainebleau
Magistral instrument de musique
<div class="fr-tile fr-enlarge-link" style="max-width: 20rem;">
<div class="fr-tile__body">
<h4 class="fr-tile__title">
<a class="fr-tile__link" href="#">
Orgue de Fontainebleau
</a>
</h4>
<p class="fr-tile__desc">
Magistral instrument de musique
</p>
</div>
<div class="fr-tile__img">
<img src="/assets/images/orgue.jpg" class="fr-responsive-img" alt="">
</div>
</div>Tuile sans description
Tuile verticale sans description
Code
= dsfr_tile(title: "Orgue de Fontainebleau",
url: "#",
image_src: "/assets/images/orgue.jpg",
html_attributes: {style: "max-width: 20rem;"})Résultat
<div class="fr-tile fr-enlarge-link" style="max-width: 20rem;">
<div class="fr-tile__body">
<h4 class="fr-tile__title">
<a class="fr-tile__link" href="#">
Orgue de Fontainebleau
</a>
</h4>
</div>
<div class="fr-tile__img">
<img src="/assets/images/orgue.jpg" class="fr-responsive-img" alt="">
</div>
</div>Tuile sans image
Tuile verticale sans image
Code
= dsfr_tile(title: "Orgue de Fontainebleau",
url: "#",
description: "Magistral instrument de musique",
html_attributes: {style: "max-width: 20rem;"})Résultat
Orgue de Fontainebleau
Magistral instrument de musique
<div class="fr-tile fr-enlarge-link" style="max-width: 20rem;">
<div class="fr-tile__body">
<h4 class="fr-tile__title">
<a class="fr-tile__link" href="#">
Orgue de Fontainebleau
</a>
</h4>
<p class="fr-tile__desc">
Magistral instrument de musique
</p>
</div>
</div>Tuile avec image alt
Tuile avec text alternatif pour l’image
Code
= dsfr_tile(title: "Orgue de Fontainebleau",
url: "#",
image_src: "/assets/images/orgue.jpg",
image_alt: "Orgue orange et bleu",
description: "Magistral instrument de musique",
html_attributes: {style: "max-width: 20rem;"})Résultat
Orgue de Fontainebleau
Magistral instrument de musique
<div class="fr-tile fr-enlarge-link" style="max-width: 20rem;">
<div class="fr-tile__body">
<h4 class="fr-tile__title">
<a class="fr-tile__link" href="#">
Orgue de Fontainebleau
</a>
</h4>
<p class="fr-tile__desc">
Magistral instrument de musique
</p>
</div>
<div class="fr-tile__img">
<img src="/assets/images/orgue.jpg" class="fr-responsive-img" alt="Orgue orange et bleu">
</div>
</div>Tuile horizontale
Tuile horizontale avec image, titre et description
Code
= dsfr_tile(title: "Orgue de Fontainebleau",
url: "#",
image_src: "/assets/images/orgue.jpg",
description: "Magistral instrument de musique",
orientation: :horizontal,
html_attributes: {style: "max-width: 30rem;"})Résultat
Orgue de Fontainebleau
Magistral instrument de musique
<div class="fr-tile fr-enlarge-link fr-tile--horizontal" style="max-width: 30rem;">
<div class="fr-tile__body">
<h4 class="fr-tile__title">
<a class="fr-tile__link" href="#">
Orgue de Fontainebleau
</a>
</h4>
<p class="fr-tile__desc">
Magistral instrument de musique
</p>
</div>
<div class="fr-tile__img">
<img src="/assets/images/orgue.jpg" class="fr-responsive-img" alt="">
</div>
</div>Tuile avec un niveau de titre spécifique
L’argument heading_level ne change pas l’aspect de la tuile mais permet d’adapter le niveau du heading à votre page pour améliorer l’accessibilité en respectant la cohérence de niveaux de titres.
Le niveau par défaut est 4, vous pouvez l’augmenter ou le baisser selon votre contexte.
Code
= dsfr_tile(title: "Orgue de Fontainebleau",
url: "#",
image_src: "/assets/images/orgue.jpg",
image_alt: "Orgue orange et bleu",
heading_level: 2,
html_attributes: {style: "max-width: 20rem;"})Résultat
<div class="fr-tile fr-enlarge-link" style="max-width: 20rem;">
<div class="fr-tile__body">
<h2 class="fr-tile__title">
<a class="fr-tile__link" href="#">
Orgue de Fontainebleau
</a>
</h2>
</div>
<div class="fr-tile__img">
<img src="/assets/images/orgue.jpg" class="fr-responsive-img" alt="Orgue orange et bleu">
</div>
</div>