DSFR v1.14.1

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

<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7043">
    <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-7047">
    <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-7050">
    <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-7053">
    <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-7056">
    <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-7060">
    <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-7063">
    <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-7066">
    <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

<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7069">
    <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

<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7072">
    <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

<div class="fr-tile fr-tile--grey fr-enlarge-link" id="tile-7076">
    <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

<div class="fr-tile fr-tile--no-border fr-enlarge-link" id="tile-7079">
    <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

<div class="fr-tile fr-tile--no-background fr-enlarge-link" id="tile-7082">
    <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

<div class="fr-tile fr-tile--shadow fr-enlarge-link" id="tile-7085">
    <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-7089">
    <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-7092">
    <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-7095">
    <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-7099">
    <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-7103">
    <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-7106">
    <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-7110">
    <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-7113">
    <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

<div class="fr-tile fr-tile--no-icon fr-enlarge-link" id="tile-7117">
    <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-7120">
    <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

<div class="fr-tile fr-tile--horizontal fr-enlarge-link" id="tile-7124">
    <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

<div class="fr-tile fr-tile--sm fr-tile--horizontal fr-enlarge-link" id="tile-7127">
    <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

<div class="fr-tile fr-tile--horizontal fr-tile--vertical@md fr-enlarge-link" id="tile-7130">
    <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

<div class="fr-tile fr-tile--sm fr-tile--horizontal fr-tile--vertical@md fr-enlarge-link" id="tile-7133">
    <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

<div class="fr-tile fr-tile--horizontal fr-tile--vertical@lg fr-enlarge-link" id="tile-7136">
    <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

<div class="fr-tile fr-tile--sm fr-tile--horizontal fr-tile--vertical@lg fr-enlarge-link" id="tile-7139">
    <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-7146">
            <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-7147">
            <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-7148">
            <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-7149">
            <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

<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-7155">
            <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-7156">
            <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-7157">
            <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-7158">
            <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

<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-7165">
            <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-7166">
            <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-7167">
            <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-7168">
            <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

<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-7174">
            <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-7175">
            <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-7176">
            <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-7177">
            <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.