Tuiles verticales
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
<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 M bold</a>
</h4>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</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 class="fr-responsive-img" src="../../../example/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>
</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 class="fr-responsive-img" src="../../../example/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>
</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 class="fr-responsive-img" src="../../../example/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>
</div>
</div>
Tuiles verticales
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
<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 M bold</a>
</h4>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</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">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</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">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</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">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
</div>
Tuiles verticales
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
<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 M bold</a>
</h4>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</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>
</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>
</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>
</div>
</div>
Tuiles verticales
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
<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 M bold</a>
</h4>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</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">Texte M regular 2 lignes max</p>
</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">Texte M regular 2 lignes max</p>
</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">Texte M regular 2 lignes max</p>
</div>
</div>
</div>
</div>
Tuiles verticales accentuées
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
<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 fr-tile--neutral">
<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 class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-6 fr-col-md-4 fr-col-lg-3">
<div class="fr-tile fr-enlarge-link fr-tile--neutral">
<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 class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-6 fr-col-md-4 fr-col-lg-3">
<div class="fr-tile fr-enlarge-link fr-tile--neutral">
<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 class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-6 fr-col-md-4 fr-col-lg-3">
<div class="fr-tile fr-enlarge-link fr-tile--neutral">
<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 class="fr-responsive-img" src="../../../example/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>
</div>
</div>
Tuiles verticales, horizontales au dessus du breakpoint md
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
</div>
Tuiles verticales, horizontales au dessus du breakpoint md
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
</div>
Tuiles verticales, horizontales au dessus du breakpoint md
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
</div>
</div>
</div>
Tuiles verticales, horizontales au dessus du breakpoint md
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
</div>
</div>
</div>
Tuiles horizontales
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
<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 M bold</a>
</h4>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</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 class="fr-responsive-img" src="../../../example/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>
</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 class="fr-responsive-img" src="../../../example/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>
</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 class="fr-responsive-img" src="../../../example/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>
</div>
</div>
Tuiles horizontales
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
<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 M bold</a>
</h4>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</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">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</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">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</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">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
</div>
Tuiles horizontales
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
<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 M bold</a>
</h4>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</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>
</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>
</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>
</div>
</div>
Tuiles horizontales
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
<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 M bold</a>
</h4>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</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">Texte M regular 2 lignes max</p>
</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">Texte M regular 2 lignes max</p>
</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">Texte M regular 2 lignes max</p>
</div>
</div>
</div>
</div>
Tuiles horizontales, verticales au dessus du breakpoint md
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
</div>
Tuiles horizontales, verticales au dessus du breakpoint md
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
<div class="fr-tile__img">
<img class="fr-responsive-img" src="../../../example/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>
</div>
</div>
Tuiles horizontales, verticales au dessus du breakpoint md
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
Titre M bold
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
</div>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
</div>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
</div>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
</div>
</div>
</div>
Tuiles horizontales, verticales au dessus du breakpoint md
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
Titre M bold
Texte M regular 2 lignes max
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
</div>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
</div>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
</div>
</div>
<div class="fr-col-6 fr-col-md-12">
<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>
<p class="fr-tile__desc">Texte M regular 2 lignes max</p>
</div>
</div>
</div>
</div>