DSFR v1.13.0

Retour

Tuile (tile)

Documentation

tuile verticale md, taille par défaut

dans une grille sur 3 à 6 colonnes en version desktop

<div class="fr-tile fr-enlarge-link" id="tile-7392">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <p class="fr-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

tuile taille sm

dans une grille sur 2 à 4 colonnes en version desktop

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Détail (optionel)

<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7395">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <p class="fr-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile sans image cas max

<div class="fr-tile fr-enlarge-link" id="tile-7399">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <p class="fr-tile__detail">Détail (optionel)</p>
            <div class="fr-tile__start">
                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
            </div>
        </div>
    </div>
</div>

Tuile sans image, minimum

<div class="fr-tile fr-enlarge-link" id="tile-7402">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
        </div>
    </div>
</div>

Tuile titre et description

<div class="fr-tile fr-enlarge-link" id="tile-7405">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
</div>

Tuile titre et détails

<div class="fr-tile fr-enlarge-link" id="tile-7408">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__detail">Détail (optionel)</p>
        </div>
    </div>
</div>

Tuile verticale avec badge dans le contenu

<div class="fr-tile fr-enlarge-link" id="tile-7412">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <div class="fr-tile__start">
                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
            </div>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale avec tag dans le contenu

<div class="fr-tile fr-enlarge-link" id="tile-7415">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <div class="fr-tile__start">
                <p class="fr-tag">Libellé tag</p>
            </div>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale avec détail

<div class="fr-tile fr-enlarge-link" id="tile-7418">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale sm avec détails et badge

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Détail (optionel)

Libellé badge

<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7421">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <p class="fr-tile__detail">Détail (optionel)</p>
            <div class="fr-tile__start">
                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
            </div>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale sm avec détails et tag

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Détail (optionel)

Libellé tag

<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7424">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <p class="fr-tile__detail">Détail (optionel)</p>
            <div class="fr-tile__start">
                <p class="fr-tag">Libellé tag</p>
            </div>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale variation accentuée en contrast grey

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Libellé badge

<div class="fr-tile fr-tile--grey fr-enlarge-link" id="tile-7428">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <div class="fr-tile__start">
                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
            </div>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale variation sans bordure

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Libellé badge

<div class="fr-tile fr-tile--no-border fr-enlarge-link" id="tile-7431">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <div class="fr-tile__start">
                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
            </div>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale variation sans fond

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Libellé badge

<div class="fr-tile fr-tile--no-background fr-enlarge-link" id="tile-7434">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <div class="fr-tile__start">
                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
            </div>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale variation ombre portée

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Libellé badge

<div class="fr-tile fr-tile--shadow fr-enlarge-link" id="tile-7437">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <div class="fr-tile__start">
                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
            </div>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile avec bouton, taille par défaut

dans une grille sur 3 à 6 colonnes en version desktop

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Détail (optionel)

<div class="fr-tile fr-enlarge-button" id="tile-7441">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <button type="button">Intitulé de la tuile</button>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <p class="fr-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile avec bouton verticale variation accentuée en contrast grey

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Libellé badge

<div class="fr-tile fr-tile--grey fr-enlarge-button" id="tile-7444">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <button type="button">Intitulé de la tuile</button>
            </h3>
            <p class="fr-tile__desc">Lorem [...] elit ut.</p>
            <div class="fr-tile__start">
                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
            </div>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile avec bouton sans icone

<div class="fr-tile fr-tile--no-icon fr-enlarge-button" id="tile-7447">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <button type="button">Intitulé de la tuile</button>
            </h3>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile sans lien

Intitulé de la tuile 

<div class="fr-tile" id="tile-7451">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                Intitulé de la tuile
            </h3>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale sans lien étendu à la tuile

<div class="fr-tile" id="tile-7455">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale sans lien étendu à la tuile, nouvelle fenêtre

<div class="fr-tile" id="tile-7458">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a title="Intitulé de la tuile - nouvelle fenêtre" href="[url - à modifier]" target="_blank" rel="noopener external">Intitulé de la tuile</a>
            </h3>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile avec lien désactivé (a sans href)

<div class="fr-tile fr-enlarge-link" id="tile-7462">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a aria-disabled="true" role="link">Intitulé de la tuile</a>
            </h3>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile avec bouton désactivé (disabled)

<div class="fr-tile fr-enlarge-button" id="tile-7465">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <button type="button" disabled>Intitulé de la tuile</button>
            </h3>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile sans icone

Intitulé de la tuile 

<div class="fr-tile fr-tile--no-icon fr-enlarge-link" id="tile-7469">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile avec icone lien externe

<div class="fr-tile fr-enlarge-link" id="tile-7472">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a title="Intitulé de la tuile - nouvelle fenêtre" href="[url - à modifier]" target="_blank" rel="noopener external">Intitulé de la tuile</a>
            </h3>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile horizontale avec détails et tag

dans une grille sur 4 à 6 colonnes en version desktop

Intitulé de la tuile

Détail (optionel)

Libellé tag

<div class="fr-tile fr-tile--horizontal fr-enlarge-link" id="tile-7476">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__detail">Détail (optionel)</p>
            <div class="fr-tile__start">
                <p class="fr-tag">Libellé tag</p>
            </div>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile sm horizontale avec détails et badge

dans une grille sur 3 à 6 colonnes en version desktop

Intitulé de la tuile

Détail (optionel)

Libellé badge

<div class="fr-tile fr-tile--sm fr-tile--horizontal fr-enlarge-link" id="tile-7479">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__detail">Détail (optionel)</p>
            <div class="fr-tile__start">
                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
            </div>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile horizontale puis vertical à partir du breakpoint md

dans une grille sur 3 à 6 colonnes en version desktop

Intitulé de la tuile

Détail (optionel)

<div class="fr-tile fr-tile--horizontal fr-tile--vertical@md fr-enlarge-link" id="tile-7482">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile sm horizontale puis vertical à partir du breakpoint md

dans une grille sur 3 à 6 colonnes en version desktop

Intitulé de la tuile

Détail (optionel)

<div class="fr-tile fr-tile--sm fr-tile--horizontal fr-tile--vertical@md fr-enlarge-link" id="tile-7485">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile horizontale puis vertical à partir du breakpoint lg

dans une grille sur 3 à 6 colonnes en version desktop

Intitulé de la tuile

Détail (optionel)

<div class="fr-tile fr-tile--horizontal fr-tile--vertical@lg fr-enlarge-link" id="tile-7488">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile sm horizontale puis vertical à partir du breakpoint lg

dans une grille sur 3 à 6 colonnes en version desktop

Intitulé de la tuile

Détail (optionel)

<div class="fr-tile fr-tile--sm fr-tile--horizontal fr-tile--vertical@lg fr-enlarge-link" id="tile-7491">
    <div class="fr-tile__body">
        <div class="fr-tile__content">
            <h3 class="fr-tile__title">
                <a href="[url - à modifier]">Intitulé de la tuile</a>
            </h3>
            <p class="fr-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="fr-tile__header">
        <div class="fr-tile__pictogram">
            <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Grilles de tuiles verticales

<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" id="tile-7498">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__desc">Lorem [...] elit ut.</p>
                    <p class="fr-tile__detail">Détail (optionel)</p>
                    <div class="fr-tile__start">
                        <p class="fr-tag">Libellé tag</p>
                    </div>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
        <div class="fr-tile fr-enlarge-link" id="tile-7499">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__desc">Lorem [...] elit ut.</p>
                    <div class="fr-tile__start">
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </div>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
        <div class="fr-tile fr-enlarge-link" id="tile-7500">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__detail">Détail (optionel)</p>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
        <div class="fr-tile fr-enlarge-link" id="tile-7501">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

Grilles de tuiles verticales sm

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Détail (optionel)

Libellé tag

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Libellé badge

Intitulé de la tuile

Détail (optionel)

Intitulé de la tuile 

<div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-sm-6 fr-col-md-3 fr-col-lg-2">
        <div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7507">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__desc">Lorem [...] elit ut.</p>
                    <p class="fr-tile__detail">Détail (optionel)</p>
                    <div class="fr-tile__start">
                        <p class="fr-tag">Libellé tag</p>
                    </div>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-sm-6 fr-col-md-3 fr-col-lg-2">
        <div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7508">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__desc">Lorem [...] elit ut.</p>
                    <div class="fr-tile__start">
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </div>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-sm-6 fr-col-md-3 fr-col-lg-2">
        <div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7509">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__detail">Détail (optionel)</p>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-sm-6 fr-col-md-3 fr-col-lg-2">
        <div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7510">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

Grilles de tuiles horizontales

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Détail (optionel)

Libellé tag

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Libellé badge

Intitulé de la tuile

Détail (optionel)

Intitulé de la tuile 

<div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
        <div class="fr-tile fr-tile--horizontal fr-enlarge-link" id="tile-7517">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__desc">Lorem [...] elit ut.</p>
                    <p class="fr-tile__detail">Détail (optionel)</p>
                    <div class="fr-tile__start">
                        <p class="fr-tag">Libellé tag</p>
                    </div>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
        <div class="fr-tile fr-tile--horizontal fr-enlarge-link" id="tile-7518">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__desc">Lorem [...] elit ut.</p>
                    <div class="fr-tile__start">
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </div>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
        <div class="fr-tile fr-tile--horizontal fr-enlarge-link" id="tile-7519">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__detail">Détail (optionel)</p>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
        <div class="fr-tile fr-tile--horizontal fr-enlarge-link" id="tile-7520">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

Grilles de tuiles horizontales sm

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Détail (optionel)

Libellé tag

Intitulé de la tuile

Lorem ipsum dolor sit amet, consectetur adipiscing, incididu

Libellé badge

Intitulé de la tuile

Détail (optionel)

Intitulé de la tuile 

<div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
        <div class="fr-tile fr-tile--sm fr-tile--horizontal fr-enlarge-link" id="tile-7526">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__desc">Lorem [...] elit ut.</p>
                    <p class="fr-tile__detail">Détail (optionel)</p>
                    <div class="fr-tile__start">
                        <p class="fr-tag">Libellé tag</p>
                    </div>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
        <div class="fr-tile fr-tile--sm fr-tile--horizontal fr-enlarge-link" id="tile-7527">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__desc">Lorem [...] elit ut.</p>
                    <div class="fr-tile__start">
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </div>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
        <div class="fr-tile fr-tile--sm fr-tile--horizontal fr-enlarge-link" id="tile-7528">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                    <p class="fr-tile__detail">Détail (optionel)</p>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
        <div class="fr-tile fr-tile--sm fr-tile--horizontal fr-enlarge-link" id="tile-7529">
            <div class="fr-tile__body">
                <div class="fr-tile__content">
                    <h3 class="fr-tile__title">
                        <a href="[url - à modifier]">Intitulé de la tuile</a>
                    </h3>
                </div>
            </div>
            <div class="fr-tile__header">
                <div class="fr-tile__pictogram">
                    <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

Autres versions

Paramètres d’affichage

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