Interface de contrôle des tests
Retour

Tuiles (tiles)

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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 class="fr-tile__img">
                <img src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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">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 horizontales, verticales 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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-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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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-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 horizontales, verticales 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 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 class="fr-tile__img">
                <img src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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">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 verticales, horizontales 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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-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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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 src="../img/placeholder.1x1.png" class="fr-responsive-img" 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-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 verticales, horizontales 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>