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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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>

Paramètres d’affichage

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