Retour

Tuile (tile)

Documentation

tuile verticale md, taille par défaut

dans une grille sur 3 à 6 colonnes en version desktop

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

Tuile sans image cas max

<div class="village-tile village-enlarge-link" id="tile-7804">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__desc">Lorem [...] elit ut.</p>
            <p class="village-tile__detail">Détail (optionel)</p>
            <div class="village-tile__start">
                <p class="village-badge village-badge--village-color10">label badge</p>
            </div>
        </div>
    </div>
</div>

Tuile sans image, minimum

<div class="village-tile village-enlarge-link" id="tile-7807">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
        </div>
    </div>
</div>

Tuile titre et description

<div class="village-tile village-enlarge-link" id="tile-7810">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
</div>

Tuile titre et détails

<div class="village-tile village-enlarge-link" id="tile-7813">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__detail">Détail (optionel)</p>
        </div>
    </div>
</div>

Tuile verticale avec badge dans le contenu

<div class="village-tile village-enlarge-link" id="tile-7817">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__desc">Lorem [...] elit ut.</p>
            <div class="village-tile__start">
                <p class="village-badge village-badge--village-color10">label badge</p>
            </div>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile village-enlarge-link" id="tile-7821">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__desc">Lorem [...] elit ut.</p>
            <div class="village-tile__start">
                <p class="village-tag" id="tag-7822">label tag</p>
            </div>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale avec détail

<div class="village-tile village-enlarge-link" id="tile-7825">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile village-tile--sm village-enlarge-link" id="tile-7828">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__desc">Lorem [...] elit ut.</p>
            <p class="village-tile__detail">Détail (optionel)</p>
            <div class="village-tile__start">
                <p class="village-badge village-badge--village-color10">label badge</p>
            </div>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile village-tile--sm village-enlarge-link" id="tile-7832">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__desc">Lorem [...] elit ut.</p>
            <p class="village-tile__detail">Détail (optionel)</p>
            <div class="village-tile__start">
                <p class="village-tag" id="tag-7833">label tag</p>
            </div>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile village-tile--grey village-enlarge-link" id="tile-7837">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__desc">Lorem [...] elit ut.</p>
            <div class="village-tile__start">
                <p class="village-badge village-badge--village-color10">label badge</p>
            </div>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile verticale variation sans bordure

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

Tuile verticale variation sans fond

<div class="village-tile village-tile--no-background village-enlarge-link" id="tile-7843">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__desc">Lorem [...] elit ut.</p>
            <div class="village-tile__start">
                <p class="village-badge village-badge--village-color10">label badge</p>
            </div>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile village-tile--shadow village-enlarge-link" id="tile-7846">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__desc">Lorem [...] elit ut.</p>
            <div class="village-tile__start">
                <p class="village-badge village-badge--village-color10">label badge</p>
            </div>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile" id="tile-7850">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                Intitulé de la tuile
            </h3>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile" id="tile-7854">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile" id="tile-7857">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#">Intitulé de la tuile</a>
            </h3>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Tuile désactivée

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

Tuile sans icone

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

Tuile avec icone lien externe

<div class="village-tile village-enlarge-link" id="tile-7868">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#">Intitulé de la tuile</a>
            </h3>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile village-tile--horizontal village-enlarge-link" id="tile-7873">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__detail">Détail (optionel)</p>
            <div class="village-tile__start">
                <p class="village-tag" id="tag-7874">label tag</p>
            </div>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile village-tile--sm village-tile--horizontal village-enlarge-link" id="tile-7877">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__detail">Détail (optionel)</p>
            <div class="village-tile__start">
                <p class="village-badge village-badge--village-color10">label badge</p>
            </div>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile village-tile--horizontal village-tile--vertical@md village-enlarge-link" id="tile-7880">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile village-tile--sm village-tile--horizontal village-tile--vertical@md village-enlarge-link" id="tile-7883">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile village-tile--horizontal village-tile--vertical@lg village-enlarge-link" id="tile-7886">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-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="village-tile village-tile--sm village-tile--horizontal village-tile--vertical@lg village-enlarge-link" id="tile-7889">
    <div class="village-tile__body">
        <div class="village-tile__content">
            <h3 class="village-tile__title">
                <a href="#">Intitulé de la tuile</a>
            </h3>
            <p class="village-tile__detail">Détail (optionel)</p>
        </div>
    </div>
    <div class="village-tile__header">
        <div class="village-tile__pictogram">
            <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
            </svg>
        </div>
    </div>
</div>

Grilles de tuiles verticales

<div class="village-grid-row village-grid-row--gutters">
    <div class="village-col-12 village-col-md-4 village-col-lg-3">
        <div class="village-tile village-enlarge-link" id="tile-7897">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__desc">Lorem [...] elit ut.</p>
                    <p class="village-tile__detail">Détail (optionel)</p>
                    <div class="village-tile__start">
                        <p class="village-tag" id="tag-7898">label tag</p>
                    </div>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-4 village-col-lg-3">
        <div class="village-tile village-enlarge-link" id="tile-7899">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__desc">Lorem [...] elit ut.</p>
                    <div class="village-tile__start">
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </div>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-4 village-col-lg-3">
        <div class="village-tile village-enlarge-link" id="tile-7900">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__detail">Détail (optionel)</p>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-4 village-col-lg-3">
        <div class="village-tile village-enlarge-link" id="tile-7901">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-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="village-grid-row village-grid-row--gutters">
    <div class="village-col-12 village-col-sm-6 village-col-md-3 village-col-lg-2">
        <div class="village-tile village-tile--sm village-enlarge-link" id="tile-7908">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__desc">Lorem [...] elit ut.</p>
                    <p class="village-tile__detail">Détail (optionel)</p>
                    <div class="village-tile__start">
                        <p class="village-tag" id="tag-7909">label tag</p>
                    </div>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-sm-6 village-col-md-3 village-col-lg-2">
        <div class="village-tile village-tile--sm village-enlarge-link" id="tile-7910">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__desc">Lorem [...] elit ut.</p>
                    <div class="village-tile__start">
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </div>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-sm-6 village-col-md-3 village-col-lg-2">
        <div class="village-tile village-tile--sm village-enlarge-link" id="tile-7911">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__detail">Détail (optionel)</p>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-sm-6 village-col-md-3 village-col-lg-2">
        <div class="village-tile village-tile--sm village-enlarge-link" id="tile-7912">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-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="village-grid-row village-grid-row--gutters">
    <div class="village-col-12 village-col-md-6 village-col-lg-4">
        <div class="village-tile village-tile--horizontal village-enlarge-link" id="tile-7920">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__desc">Lorem [...] elit ut.</p>
                    <p class="village-tile__detail">Détail (optionel)</p>
                    <div class="village-tile__start">
                        <p class="village-tag" id="tag-7921">label tag</p>
                    </div>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6 village-col-lg-4">
        <div class="village-tile village-tile--horizontal village-enlarge-link" id="tile-7922">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__desc">Lorem [...] elit ut.</p>
                    <div class="village-tile__start">
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </div>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6 village-col-lg-4">
        <div class="village-tile village-tile--horizontal village-enlarge-link" id="tile-7923">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__detail">Détail (optionel)</p>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6 village-col-lg-4">
        <div class="village-tile village-tile--horizontal village-enlarge-link" id="tile-7924">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-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="village-grid-row village-grid-row--gutters">
    <div class="village-col-12 village-col-sm-6 village-col-md-4 village-col-lg-3">
        <div class="village-tile village-tile--sm village-tile--horizontal village-enlarge-link" id="tile-7931">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__desc">Lorem [...] elit ut.</p>
                    <p class="village-tile__detail">Détail (optionel)</p>
                    <div class="village-tile__start">
                        <p class="village-tag" id="tag-7932">label tag</p>
                    </div>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-sm-6 village-col-md-4 village-col-lg-3">
        <div class="village-tile village-tile--sm village-tile--horizontal village-enlarge-link" id="tile-7933">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__desc">Lorem [...] elit ut.</p>
                    <div class="village-tile__start">
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </div>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-sm-6 village-col-md-4 village-col-lg-3">
        <div class="village-tile village-tile--sm village-tile--horizontal village-enlarge-link" id="tile-7934">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                    <p class="village-tile__detail">Détail (optionel)</p>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-sm-6 village-col-md-4 village-col-lg-3">
        <div class="village-tile village-tile--sm village-tile--horizontal village-enlarge-link" id="tile-7935">
            <div class="village-tile__body">
                <div class="village-tile__content">
                    <h3 class="village-tile__title">
                        <a href="#">Intitulé de la tuile</a>
                    </h3>
                </div>
            </div>
            <div class="village-tile__header">
                <div class="village-tile__pictogram">
                    <svg aria-hidden="true" class="village-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                        <use class="village-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use>
                        <use class="village-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use>
                        <use class="village-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.