Retour

Carte (card)

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Documentation

Carte verticale md, taille par défaut

dans une grille sur 4 à 6 colonnes en version desktop

<div id="card-1525" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte taille sm

dans une grille sur 3 à 4 colonnes en version desktop

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1528" class="village-card village-enlarge-link village-card--sm">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte taille lg

dans une grille sur 6 à 12 colonnes en version desktop

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1531" class="village-card village-enlarge-link village-card--lg">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte sans icône

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1535" class="village-card village-enlarge-link village-card--no-icon">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte avec icône lien externe

<div id="card-1538" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale variation accentuée en contrast grey

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1542" class="village-card village-enlarge-link village-card--grey">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale variation sans bordure

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1545" class="village-card village-enlarge-link village-card--no-border">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale variation sans fond

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1548" class="village-card village-enlarge-link village-card--no-background">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale variation ombre portée

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1551" class="village-card village-enlarge-link village-card--shadow">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte sans image

<div id="card-1555" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
</div>

Carte verticale avec image au ratio d'aspect 32x9

<div id="card-1559" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img village-ratio-32x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec image au ratio d'aspect 3x2

<div id="card-1562" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img village-ratio-3x2" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec image au ratio d'aspect 4x3

<div id="card-1565" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img village-ratio-4x3" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec image au ratio d'aspect 1x1

<div id="card-1568" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img village-ratio-1x1" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec image au ratio d'aspect 3x4

<div id="card-1571" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img village-ratio-3x4" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec image au ratio d'aspect 2x3

<div id="card-1574" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img village-ratio-2x3" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec taxonomie dans le header

<div id="card-1578" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
        <ul class="village-badges-group">
            <li>
                <p class="village-badge">label badge</p>
            </li>
        </ul>
    </div>
</div>

Carte verticale avec badges dans le contenu

<div id="card-1582" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-badges-group">
                    <li>
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </li>
                    <li>
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec tags dans le contenu

<div id="card-1587" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1588">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1589">label tag</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec détail

<div id="card-1592" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <p class="village-card__detail">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec détail et icon

<div id="card-1595" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec détail en bas

<div id="card-1598" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__end">
                <p class="village-card__detail">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec détails en haut et en bas

<div id="card-1601" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec détails et badges

<div id="card-1604" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-badges-group">
                    <li>
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </li>
                    <li>
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec détails et tags

<div id="card-1609" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1610">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1611">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale sm avec détails et badges

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label badge

  • label badge

détail (optionnel)

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1614" class="village-card village-enlarge-link village-card--sm">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-badges-group">
                    <li>
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </li>
                    <li>
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale sm avec détails et tags

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

détail (optionnel)

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1619" class="village-card village-enlarge-link village-card--sm">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1620">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1621">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale lg avec détails et badges

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label badge

  • label badge

détail (optionnel)

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1624" class="village-card village-enlarge-link village-card--lg">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-badges-group">
                    <li>
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </li>
                    <li>
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale lg avec détails et tags

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

détail (optionnel)

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1629" class="village-card village-enlarge-link village-card--lg">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1630">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1631">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte sans lien

Intitulé de la carte

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1635" class="village-card">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                Intitulé de la carte
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale sans lien étendu à la carte

<div id="card-1639" class="village-card">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale sans lien étendu et ouverture dans une nouvelle fenêtre

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1642" class="village-card">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale SM sans lien étendu et ouverture dans une nouvelle fenêtre

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1645" class="village-card village-card--sm">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale LG sans lien étendu et ouverture dans une nouvelle fenêtre

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1648" class="village-card village-card--lg">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

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

<div id="card-1652" class="village-card village-enlarge-link">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a role="link" aria-disabled="true">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec zone d'action

dans une grille sur 4 à 6 colonnes en version desktop

<div id="card-1658" class="village-card">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
        <div class="village-card__footer">
            <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                <li>
                    <button class="village-btn village-btn--secondary" id="button-1659">
                        Label
                    </button>
                </li>
                <li>
                    <button class="village-btn" id="button-1660">
                        Label
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec zone d'action boutons

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1665" class="village-card">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="village-card__footer">
            <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                <li>
                    <button class="village-btn village-btn--secondary" id="button-1666">
                        Label
                    </button>
                </li>
                <li>
                    <button class="village-btn" id="button-1667">
                        Label
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale sm avec zone d'action boutons

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1672" class="village-card village-card--sm">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="village-card__footer">
            <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                <li>
                    <button class="village-btn village-btn--secondary" id="button-1673">
                        Label
                    </button>
                </li>
                <li>
                    <button class="village-btn" id="button-1674">
                        Label
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale lg avec zone d'action boutons

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1679" class="village-card village-card--lg">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="village-card__footer">
            <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                <li>
                    <button class="village-btn village-btn--secondary" id="button-1680">
                        Label
                    </button>
                </li>
                <li>
                    <button class="village-btn" id="button-1681">
                        Label
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte verticale avec zone d'action liens

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1686" class="village-card">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="village-card__footer">
            <ul class="village-links-group village-links-group--inline">
                <li>
                    <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1687" href="#">label</a>
                </li>
                <li>
                    <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1688" href="#">label</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte horizontale avec détails et tags

dans une grille sur 6 à 8 colonnes en version desktop

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

détail (optionnel)

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1694" class="village-card village-enlarge-link village-card--horizontal">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1695">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1696">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte horizontale sm avec détails et tags

dans une grille sur 4 à 6 colonnes en version desktop

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

détail (optionnel)

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1701" class="village-card village-enlarge-link village-card--sm village-card--horizontal">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1702">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1703">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte horizontale lg avec détails et tags

dans une grille sur 8 à 12 colonnes en version desktop

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

détail (optionnel)

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1708" class="village-card village-enlarge-link village-card--lg village-card--horizontal">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1709">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1710">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte horizontale avec zone d'action, détails et tags

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1717" class="village-card village-card--horizontal">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1718">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1719">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="village-card__footer">
            <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                <li>
                    <button class="village-btn village-btn--secondary" id="button-1720">
                        Label
                    </button>
                </li>
                <li>
                    <button class="village-btn" id="button-1721">
                        Label
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte horizontale sm avec zone d'action, détails et tags

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1728" class="village-card village-card--sm village-card--horizontal">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1729">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1730">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="village-card__footer">
            <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                <li>
                    <button class="village-btn village-btn--secondary" id="button-1731">
                        Label
                    </button>
                </li>
                <li>
                    <button class="village-btn" id="button-1732">
                        Label
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte horizontale lg avec zone d'action, détails et tags

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1739" class="village-card village-card--lg village-card--horizontal">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1740">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1741">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="village-card__footer">
            <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                <li>
                    <button class="village-btn village-btn--secondary" id="button-1742">
                        Label
                    </button>
                </li>
                <li>
                    <button class="village-btn" id="button-1743">
                        Label
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte horizontale image proportion de moitié avec zone d'action, détails et tags

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1750" class="village-card village-card--horizontal-half">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1751">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1752">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="village-card__footer">
            <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                <li>
                    <button class="village-btn village-btn--secondary" id="button-1753">
                        Label
                    </button>
                </li>
                <li>
                    <button class="village-btn" id="button-1754">
                        Label
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte horizontale image proportion du tiers moitié avec zone d'action, détails et tags

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1761" class="village-card village-card--horizontal-tier">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1762">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1763">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="village-card__footer">
            <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                <li>
                    <button class="village-btn village-btn--secondary" id="button-1764">
                        Label
                    </button>
                </li>
                <li>
                    <button class="village-btn" id="button-1765">
                        Label
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte horizontale avec ratio d'image particulier en mobile

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1772" class="village-card village-card--horizontal">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1773">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1774">label tag</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="village-card__footer">
            <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                <li>
                    <button class="village-btn village-btn--secondary" id="button-1775">
                        Label
                    </button>
                </li>
                <li>
                    <button class="village-btn" id="button-1776">
                        Label
                    </button>
                </li>
            </ul>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-responsive-img village-ratio-32x9" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Grilles de cartes verticales

<div class="village-grid-row village-grid-row--gutters">
    <div class="village-col-12 village-col-md-6 village-col-lg-4">
        <div id="card-1791" class="village-card village-enlarge-link">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-tags-group">
                            <li>
                                <p class="village-tag" id="tag-1792">label tag</p>
                            </li>
                            <li>
                                <p class="village-tag" id="tag-1793">label tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6 village-col-lg-4">
        <div id="card-1794" class="village-card village-enlarge-link">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-badges-group">
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6 village-col-lg-4">
        <div id="card-1795" class="village-card village-enlarge-link">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6 village-col-lg-4">
        <div id="card-1796" class="village-card village-enlarge-link">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__end">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6 village-col-lg-4">
        <div id="card-1797" class="village-card">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                        <li>
                            <button class="village-btn village-btn--secondary" id="button-1798">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="village-btn" id="button-1799">
                                Label
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6 village-col-lg-4">
        <div id="card-1800" class="village-card">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-links-group village-links-group--inline">
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1801" href="#">label</a>
                        </li>
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1802" href="#">label</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
</div>

Grilles de cartes verticales sm

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label badge

  • label badge

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<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 id="card-1816" class="village-card village-enlarge-link village-card--sm">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-tags-group">
                            <li>
                                <p class="village-tag" id="tag-1817">label tag</p>
                            </li>
                            <li>
                                <p class="village-tag" id="tag-1818">label tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-sm-6 village-col-md-4 village-col-lg-3">
        <div id="card-1819" class="village-card village-enlarge-link village-card--sm">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-badges-group">
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-sm-6 village-col-md-4 village-col-lg-3">
        <div id="card-1820" class="village-card village-enlarge-link village-card--sm">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-sm-6 village-col-md-4 village-col-lg-3">
        <div id="card-1821" class="village-card village-enlarge-link village-card--sm">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__end">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-sm-6 village-col-md-4 village-col-lg-3">
        <div id="card-1822" class="village-card village-card--sm">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                        <li>
                            <button class="village-btn village-btn--secondary" id="button-1823">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="village-btn" id="button-1824">
                                Label
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-sm-6 village-col-md-4 village-col-lg-3">
        <div id="card-1825" class="village-card village-card--sm">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-links-group village-links-group--inline">
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1826" href="#">label</a>
                        </li>
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1827" href="#">label</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
</div>

Grilles de cartes verticales lg

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label badge

  • label badge

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div class="village-grid-row village-grid-row--gutters">
    <div class="village-col-12 village-col-md-6">
        <div id="card-1841" class="village-card village-enlarge-link village-card--lg">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-tags-group">
                            <li>
                                <p class="village-tag" id="tag-1842">label tag</p>
                            </li>
                            <li>
                                <p class="village-tag" id="tag-1843">label tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6">
        <div id="card-1844" class="village-card village-enlarge-link village-card--lg">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-badges-group">
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6">
        <div id="card-1845" class="village-card village-enlarge-link village-card--lg">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6">
        <div id="card-1846" class="village-card village-enlarge-link village-card--lg">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__end">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6">
        <div id="card-1847" class="village-card village-card--lg">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                        <li>
                            <button class="village-btn village-btn--secondary" id="button-1848">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="village-btn" id="button-1849">
                                Label
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6">
        <div id="card-1850" class="village-card village-card--lg">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-links-group village-links-group--inline">
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1851" href="#">label</a>
                        </li>
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1852" href="#">label</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
</div>

Grilles de cartes horizontales

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label badge

  • label badge

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div class="village-grid-row village-grid-row--gutters">
    <div class="village-col-12 village-col-md-8">
        <div id="card-1867" class="village-card village-enlarge-link village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-tags-group">
                            <li>
                                <p class="village-tag" id="tag-1868">label tag</p>
                            </li>
                            <li>
                                <p class="village-tag" id="tag-1869">label tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-8">
        <div id="card-1870" class="village-card village-enlarge-link village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-badges-group">
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-8">
        <div id="card-1871" class="village-card village-enlarge-link village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-8">
        <div id="card-1872" class="village-card village-enlarge-link village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__end">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-8">
        <div id="card-1873" class="village-card village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                        <li>
                            <button class="village-btn village-btn--secondary" id="button-1874">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="village-btn" id="button-1875">
                                Label
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-8">
        <div id="card-1876" class="village-card village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-links-group village-links-group--inline">
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1877" href="#">label</a>
                        </li>
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1878" href="#">label</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
</div>

Grilles de cartes horizontales sm

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label badge

  • label badge

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div class="village-grid-row village-grid-row--gutters">
    <div class="village-col-12 village-col-md-6">
        <div id="card-1892" class="village-card village-enlarge-link village-card--sm village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-tags-group">
                            <li>
                                <p class="village-tag" id="tag-1893">label tag</p>
                            </li>
                            <li>
                                <p class="village-tag" id="tag-1894">label tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6">
        <div id="card-1895" class="village-card village-enlarge-link village-card--sm village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-badges-group">
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6">
        <div id="card-1896" class="village-card village-enlarge-link village-card--sm village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6">
        <div id="card-1897" class="village-card village-enlarge-link village-card--sm village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__end">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6">
        <div id="card-1898" class="village-card village-card--sm village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                        <li>
                            <button class="village-btn village-btn--secondary" id="button-1899">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="village-btn" id="button-1900">
                                Label
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-6">
        <div id="card-1901" class="village-card village-card--sm village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-links-group village-links-group--inline">
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1902" href="#">label</a>
                        </li>
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1903" href="#">label</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
</div>

Grilles de cartes horizontales lg

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label badge

  • label badge

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

détail (optionnel)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image]

Intitulé de la carte (sur lequel se trouve le lien)

[À MODIFIER - vide ou texte alternatif de l’image] 

<div class="village-grid-row village-grid-row--gutters">
    <div class="village-col-12 village-col-md-12">
        <div id="card-1917" class="village-card village-enlarge-link village-card--lg village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-tags-group">
                            <li>
                                <p class="village-tag" id="tag-1918">label tag</p>
                            </li>
                            <li>
                                <p class="village-tag" id="tag-1919">label tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-12">
        <div id="card-1920" class="village-card village-enlarge-link village-card--lg village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <ul class="village-badges-group">
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                            <li>
                                <p class="village-badge village-badge--village-color10">label badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-12">
        <div id="card-1921" class="village-card village-enlarge-link village-card--lg village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__start">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-12">
        <div id="card-1922" class="village-card village-enlarge-link village-card--lg village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="village-card__desc">Lorem [...] elit ut.</p>
                    <div class="village-card__end">
                        <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-12">
        <div id="card-1923" class="village-card village-card--lg village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-btns-group village-btns-group--inline-reverse village-btns-group--inline-lg">
                        <li>
                            <button class="village-btn village-btn--secondary" id="button-1924">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="village-btn" id="button-1925">
                                Label
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
    <div class="village-col-12 village-col-md-12">
        <div id="card-1926" class="village-card village-card--lg village-card--horizontal">
            <div class="village-card__body">
                <div class="village-card__content">
                    <h3 class="village-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="village-card__footer">
                    <ul class="village-links-group village-links-group--inline">
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1927" href="#">label</a>
                        </li>
                        <li>
                            <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-1928" href="#">label</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="village-card__header">
                <div class="village-card__img">
                    <img class="village-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
                    <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
                </div>
            </div>
        </div>
    </div>
</div>

Carte de téléchargement de fichier

Paramètres d’affichage

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