dans une grille sur 3 à 6 colonnes en version desktop
<div class="fr-tile fr-enlarge-link" id="tile-7392">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
dans une grille sur 2 à 4 colonnes en version desktop
<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7395">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididu
Détail (optionel)
Libellé badge
<div class="fr-tile fr-enlarge-link" id="tile-7399">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<p class="fr-tile__detail">Détail (optionel)</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
</div>
<div class="fr-tile fr-enlarge-link" id="tile-7402">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididu
<div class="fr-tile fr-enlarge-link" id="tile-7405">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
</div>
</div>
</div>
Détail (optionel)
<div class="fr-tile fr-enlarge-link" id="tile-7408">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
</div>
<div class="fr-tile fr-enlarge-link" id="tile-7412">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile fr-enlarge-link" id="tile-7415">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<div class="fr-tile__start">
<p class="fr-tag">Libellé tag</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
Détail (optionel)
<div class="fr-tile fr-enlarge-link" id="tile-7418">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididu
Détail (optionel)
Libellé badge
<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7421">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<p class="fr-tile__detail">Détail (optionel)</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididu
Détail (optionel)
Libellé tag
<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7424">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<p class="fr-tile__detail">Détail (optionel)</p>
<div class="fr-tile__start">
<p class="fr-tag">Libellé tag</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile fr-tile--grey fr-enlarge-link" id="tile-7428">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile fr-tile--no-border fr-enlarge-link" id="tile-7431">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile fr-tile--no-background fr-enlarge-link" id="tile-7434">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile fr-tile--shadow fr-enlarge-link" id="tile-7437">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
dans une grille sur 3 à 6 colonnes en version desktop
<div class="fr-tile fr-enlarge-button" id="tile-7441">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<button type="button">Intitulé de la tuile</button>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile fr-tile--grey fr-enlarge-button" id="tile-7444">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<button type="button">Intitulé de la tuile</button>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile fr-tile--no-icon fr-enlarge-button" id="tile-7447">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<button type="button">Intitulé de la tuile</button>
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile" id="tile-7451">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
Intitulé de la tuile
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile" id="tile-7455">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile" id="tile-7458">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a title="Intitulé de la tuile - nouvelle fenêtre" href="[url - à modifier]" target="_blank" rel="noopener external">Intitulé de la tuile</a>
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile fr-enlarge-link" id="tile-7462">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a aria-disabled="true" role="link">Intitulé de la tuile</a>
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile fr-enlarge-button" id="tile-7465">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<button type="button" disabled>Intitulé de la tuile</button>
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile fr-tile--no-icon fr-enlarge-link" id="tile-7469">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
<div class="fr-tile fr-enlarge-link" id="tile-7472">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a title="Intitulé de la tuile - nouvelle fenêtre" href="[url - à modifier]" target="_blank" rel="noopener external">Intitulé de la tuile</a>
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
dans une grille sur 4 à 6 colonnes en version desktop
<div class="fr-tile fr-tile--horizontal fr-enlarge-link" id="tile-7476">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
<div class="fr-tile__start">
<p class="fr-tag">Libellé tag</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
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-7479">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
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-7482">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
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-7485">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
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-7488">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
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-7491">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
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-7498">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<p class="fr-tile__detail">Détail (optionel)</p>
<div class="fr-tile__start">
<p class="fr-tag">Libellé tag</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<div class="fr-tile fr-enlarge-link" id="tile-7499">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<div class="fr-tile fr-enlarge-link" id="tile-7500">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-4 fr-col-lg-3">
<div class="fr-tile fr-enlarge-link" id="tile-7501">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
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-7507">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<p class="fr-tile__detail">Détail (optionel)</p>
<div class="fr-tile__start">
<p class="fr-tag">Libellé tag</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-sm-6 fr-col-md-3 fr-col-lg-2">
<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7508">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-sm-6 fr-col-md-3 fr-col-lg-2">
<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7509">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-sm-6 fr-col-md-3 fr-col-lg-2">
<div class="fr-tile fr-tile--sm fr-enlarge-link" id="tile-7510">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
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-7517">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<p class="fr-tile__detail">Détail (optionel)</p>
<div class="fr-tile__start">
<p class="fr-tag">Libellé tag</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
<div class="fr-tile fr-tile--horizontal fr-enlarge-link" id="tile-7518">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
<div class="fr-tile fr-tile--horizontal fr-enlarge-link" id="tile-7519">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
<div class="fr-tile fr-tile--horizontal fr-enlarge-link" id="tile-7520">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
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-7526">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<p class="fr-tile__detail">Détail (optionel)</p>
<div class="fr-tile__start">
<p class="fr-tag">Libellé tag</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
<div class="fr-tile fr-tile--sm fr-tile--horizontal fr-enlarge-link" id="tile-7527">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__desc">Lorem [...] elit ut.</p>
<div class="fr-tile__start">
<p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
</div>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
<div class="fr-tile fr-tile--sm fr-tile--horizontal fr-enlarge-link" id="tile-7528">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
<p class="fr-tile__detail">Détail (optionel)</p>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
<div class="fr-tile fr-tile--sm fr-tile--horizontal fr-enlarge-link" id="tile-7529">
<div class="fr-tile__body">
<div class="fr-tile__content">
<h3 class="fr-tile__title">
<a href="[url - à modifier]">Intitulé de la tuile</a>
</h3>
</div>
</div>
<div class="fr-tile__header">
<div class="fr-tile__pictogram">
<svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
<use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
<use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
<use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
</svg>
</div>
</div>
</div>
</div>
</div>