Retour

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.

Documentation

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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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--grey">
            <div class="fr-tile__body">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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--grey">
            <div class="fr-tile__body">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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--grey">
            <div class="fr-tile__body">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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--grey">
            <div class="fr-tile__body">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <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">
                <h3 class="fr-tile__title">
                    <a class="fr-tile__link" href>Titre M bold</a>
                </h3>
                <p class="fr-tile__desc">Texte M regular 2 lignes max</p>
            </div>
        </div>
    </div>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.