dans une grille sur 3 à 6 colonnes en version desktop
<div class="fr-tile fr-enlarge-link" id="tile-7433">
<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>
dans une grille sur 2 à 4 colonnes en version desktop
<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7436">
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididu
Détail (optionel)
Libellé badge
<div class="fr-tile fr-enlarge-link" id="tile-7440">
<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>
<div class="fr-tile fr-enlarge-link" id="tile-7443">
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididu
<div class="fr-tile fr-enlarge-link" id="tile-7446">
<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>
Détail (optionel)
<div class="fr-tile fr-enlarge-link" id="tile-7449">
<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>
<div class="fr-tile fr-enlarge-link" id="tile-7453">
<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 class="fr-tile fr-enlarge-link" id="tile-7456">
<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>
Détail (optionel)
<div class="fr-tile fr-enlarge-link" id="tile-7459">
<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>
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-7462">
<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>
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-7465">
<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 class="fr-tile fr-tile--grey 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>
<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 class="fr-tile fr-tile--no-border fr-enlarge-link" id="tile-7472">
<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 class="fr-tile fr-tile--no-background fr-enlarge-link" id="tile-7475">
<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 class="fr-tile fr-tile--shadow fr-enlarge-link" id="tile-7478">
<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>
dans une grille sur 3 à 6 colonnes en version desktop
<div class="fr-tile fr-enlarge-button" id="tile-7482">
<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>
<div class="fr-tile fr-tile--grey fr-enlarge-button" id="tile-7485">
<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>
<div class="fr-tile fr-tile--no-icon fr-enlarge-button" id="tile-7488">
<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>
<div class="fr-tile" id="tile-7492">
<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>
<div class="fr-tile" id="tile-7496">
<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 class="fr-tile" id="tile-7499">
<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>
<div class="fr-tile fr-enlarge-link" id="tile-7503">
<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>
<div class="fr-tile fr-enlarge-button" id="tile-7506">
<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>
<div class="fr-tile fr-tile--no-icon 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 class="fr-tile fr-enlarge-link" id="tile-7513">
<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>
dans une grille sur 4 à 6 colonnes en version desktop
<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__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>
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-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>
<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>
dans une grille sur 3 à 6 colonnes en version desktop
Détail (optionel)
<div class="fr-tile fr-tile--horizontal fr-tile--vertical@md fr-enlarge-link" id="tile-7523">
<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>
dans une grille sur 3 à 6 colonnes en version desktop
Détail (optionel)
<div class="fr-tile fr-tile--sm fr-tile--horizontal fr-tile--vertical@md 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__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>
dans une grille sur 3 à 6 colonnes en version desktop
Détail (optionel)
<div class="fr-tile fr-tile--horizontal fr-tile--vertical@lg 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>
<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>
dans une grille sur 3 à 6 colonnes en version desktop
Détail (optionel)
<div class="fr-tile fr-tile--sm fr-tile--horizontal fr-tile--vertical@lg fr-enlarge-link" id="tile-7532">
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididu
Détail (optionel)
Libellé tag
Détail (optionel)
<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-7539">
<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-7540">
<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-7541">
<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-7542">
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididu
Détail (optionel)
Libellé tag
Détail (optionel)
<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-7548">
<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-7549">
<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-7550">
<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-7551">
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididu
Détail (optionel)
Libellé tag
Détail (optionel)
<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-7558">
<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-7559">
<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-7560">
<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-7561">
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididu
Détail (optionel)
Libellé tag
Détail (optionel)
<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-7567">
<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-7568">
<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-7569">
<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-7570">
<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>