DSFR v1.12.1

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-1715" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1718" class="fr-card fr-enlarge-link fr-card--sm">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1721" class="fr-card fr-enlarge-link fr-card--lg">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1725" class="fr-card fr-enlarge-link fr-card--no-icon">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1728" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-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="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1732" class="fr-card fr-enlarge-link fr-card--grey">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1735" class="fr-card fr-enlarge-link fr-card--no-border">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1738" class="fr-card fr-enlarge-link fr-card--no-background">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1741" class="fr-card fr-enlarge-link fr-card--shadow">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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 bouton, taille par défaut

dans une grille sur 4 à 6 colonnes en version desktop

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

<div id="card-1745" class="fr-card fr-enlarge-button">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <button>Intitulé de la carte (sur lequel se trouve le bouton)</button>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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 bouton taille sm

dans une grille sur 3 à 4 colonnes en version desktop

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

<div id="card-1748" class="fr-card fr-enlarge-button fr-card--sm">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <button>Intitulé de la carte (sur lequel se trouve le bouton)</button>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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 bouton taille lg

dans une grille sur 6 à 12 colonnes en version desktop

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

<div id="card-1751" class="fr-card fr-enlarge-button fr-card--lg">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <button>Intitulé de la carte (sur lequel se trouve le bouton)</button>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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 bouton verticale variation accentuée en contrast grey

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-1754" class="fr-card fr-enlarge-button fr-card--grey">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <button>Intitulé de la carte (sur lequel se trouve le bouton)</button>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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 bouton sans icône

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

<div id="card-1757" class="fr-card fr-enlarge-button fr-card--no-icon">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <button>Intitulé de la carte (sur lequel se trouve le bouton)</button>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1761" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-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-1765" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img fr-ratio-32x9" src="../../../example/img/placeholder.32x9.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-1768" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img fr-ratio-3x2" src="../../../example/img/placeholder.3x2.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-1771" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img fr-ratio-4x3" src="../../../example/img/placeholder.4x3.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-1774" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img fr-ratio-1x1" src="../../../example/img/placeholder.1x1.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-1777" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img fr-ratio-3x4" src="../../../example/img/placeholder.3x4.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-1780" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img fr-ratio-2x3" src="../../../example/img/placeholder.2x3.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-1784" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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="fr-badges-group">
            <li>
                <p class="fr-badge">Libellé badge</p>
            </li>
        </ul>
    </div>
</div>

Carte verticale avec badges dans le contenu

<div id="card-1788" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-badges-group">
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </li>
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1793" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1794">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1795">Libellé tag</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1798" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <p class="fr-card__detail">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1801" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1804" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1807" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1810" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-badges-group">
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </li>
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1815" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1816">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1817">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé badge

  • Libellé badge

détail (optionnel)

détail (optionnel)

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

<div id="card-1820" class="fr-card fr-enlarge-link fr-card--sm">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-badges-group">
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </li>
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé tag

  • Libellé tag

détail (optionnel)

détail (optionnel)

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

<div id="card-1825" class="fr-card fr-enlarge-link fr-card--sm">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1826">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1827">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé badge

  • Libellé badge

détail (optionnel)

détail (optionnel)

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

<div id="card-1830" class="fr-card fr-enlarge-link fr-card--lg">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-badges-group">
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </li>
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé tag

  • Libellé tag

détail (optionnel)

détail (optionnel)

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

<div id="card-1835" class="fr-card fr-enlarge-link fr-card--lg">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1836">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1837">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1841" class="fr-card">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                Intitulé de la carte
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1845" class="fr-card">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1848" class="fr-card">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-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="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1851" class="fr-card fr-card--sm">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-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="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1854" class="fr-card fr-card--lg">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-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="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1858" class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a aria-disabled="true" role="link">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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 bouton désactivé (disabled)

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-1861" class="fr-card fr-enlarge-button">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <button disabled>Intitulé de la carte (sur lequel se trouve le bouton)</button>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1867" class="fr-card">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                <li>
                    <button id="button-1868" class="fr-btn fr-btn--secondary">Libellé</button>
                </li>
                <li>
                    <button id="button-1869" class="fr-btn">Libellé</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1874" class="fr-card">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                <li>
                    <button id="button-1875" class="fr-btn fr-btn--secondary">Libellé</button>
                </li>
                <li>
                    <button id="button-1876" class="fr-btn">Libellé</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1881" class="fr-card fr-card--sm">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                <li>
                    <button id="button-1882" class="fr-btn fr-btn--secondary">Libellé</button>
                </li>
                <li>
                    <button id="button-1883" class="fr-btn">Libellé</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1888" class="fr-card fr-card--lg">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                <li>
                    <button id="button-1889" class="fr-btn fr-btn--secondary">Libellé</button>
                </li>
                <li>
                    <button id="button-1890" class="fr-btn">Libellé</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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-1895" class="fr-card">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-links-group fr-links-group--inline">
                <li>
                    <a id="link-1896" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                </li>
                <li>
                    <a id="link-1897" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé tag

  • Libellé tag

détail (optionnel)

détail (optionnel)

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

<div id="card-1903" class="fr-card fr-enlarge-link fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1904">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1905">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé tag

  • Libellé tag

détail (optionnel)

détail (optionnel)

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

<div id="card-1910" class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1911">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1912">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé tag

  • Libellé tag

détail (optionnel)

détail (optionnel)

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

<div id="card-1917" class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1918">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1919">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé tag

  • Libellé tag

détail (optionnel)

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

<div id="card-1926" class="fr-card fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1927">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1928">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                <li>
                    <button id="button-1929" class="fr-btn fr-btn--secondary">Libellé</button>
                </li>
                <li>
                    <button id="button-1930" class="fr-btn">Libellé</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé tag

  • Libellé tag

détail (optionnel)

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

<div id="card-1937" class="fr-card fr-card--sm fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1938">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1939">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                <li>
                    <button id="button-1940" class="fr-btn fr-btn--secondary">Libellé</button>
                </li>
                <li>
                    <button id="button-1941" class="fr-btn">Libellé</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé tag

  • Libellé tag

détail (optionnel)

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

<div id="card-1948" class="fr-card fr-card--lg fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1949">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1950">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                <li>
                    <button id="button-1951" class="fr-btn fr-btn--secondary">Libellé</button>
                </li>
                <li>
                    <button id="button-1952" class="fr-btn">Libellé</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé tag

  • Libellé tag

détail (optionnel)

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

<div id="card-1959" class="fr-card fr-card--horizontal-half">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1960">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1961">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                <li>
                    <button id="button-1962" class="fr-btn fr-btn--secondary">Libellé</button>
                </li>
                <li>
                    <button id="button-1963" class="fr-btn">Libellé</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé tag

  • Libellé tag

détail (optionnel)

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

<div id="card-1970" class="fr-card fr-card--horizontal-tier">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1971">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1972">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                <li>
                    <button id="button-1973" class="fr-btn fr-btn--secondary">Libellé</button>
                </li>
                <li>
                    <button id="button-1974" class="fr-btn">Libellé</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-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

  • Libellé tag

  • Libellé tag

détail (optionnel)

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

<div id="card-1981" class="fr-card fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1982">Libellé tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1983">Libellé tag</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                <li>
                    <button id="button-1984" class="fr-btn fr-btn--secondary">Libellé</button>
                </li>
                <li>
                    <button id="button-1985" class="fr-btn">Libellé</button>
                </li>
            </ul>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img fr-ratio-32x9" src="../../../example/img/placeholder.32x9.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="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
        <div id="card-2000" class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag" id="tag-2001">Libellé tag</p>
                            </li>
                            <li>
                                <p class="fr-tag" id="tag-2002">Libellé tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6 fr-col-lg-4">
        <div id="card-2003" class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6 fr-col-lg-4">
        <div id="card-2004" class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6 fr-col-lg-4">
        <div id="card-2005" class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__end">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6 fr-col-lg-4">
        <div id="card-2006" class="fr-card">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button id="button-2007" class="fr-btn fr-btn--secondary">Libellé</button>
                        </li>
                        <li>
                            <button id="button-2008" class="fr-btn">Libellé</button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6 fr-col-lg-4">
        <div id="card-2009" class="fr-card">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group fr-links-group--inline">
                        <li>
                            <a id="link-2010" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                        <li>
                            <a id="link-2011" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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

  • Libellé tag

  • Libellé 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

  • Libellé badge

  • Libellé 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="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
        <div id="card-2025" class="fr-card fr-enlarge-link fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag" id="tag-2026">Libellé tag</p>
                            </li>
                            <li>
                                <p class="fr-tag" id="tag-2027">Libellé tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
        <div id="card-2028" class="fr-card fr-enlarge-link fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
        <div id="card-2029" class="fr-card fr-enlarge-link fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
        <div id="card-2030" class="fr-card fr-enlarge-link fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__end">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
        <div id="card-2031" class="fr-card fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button id="button-2032" class="fr-btn fr-btn--secondary">Libellé</button>
                        </li>
                        <li>
                            <button id="button-2033" class="fr-btn">Libellé</button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
        <div id="card-2034" class="fr-card fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group fr-links-group--inline">
                        <li>
                            <a id="link-2035" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                        <li>
                            <a id="link-2036" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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

  • Libellé tag

  • Libellé 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

  • Libellé badge

  • Libellé 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="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-6">
        <div id="card-2050" class="fr-card fr-enlarge-link fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag" id="tag-2051">Libellé tag</p>
                            </li>
                            <li>
                                <p class="fr-tag" id="tag-2052">Libellé tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6">
        <div id="card-2053" class="fr-card fr-enlarge-link fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6">
        <div id="card-2054" class="fr-card fr-enlarge-link fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6">
        <div id="card-2055" class="fr-card fr-enlarge-link fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__end">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6">
        <div id="card-2056" class="fr-card fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button id="button-2057" class="fr-btn fr-btn--secondary">Libellé</button>
                        </li>
                        <li>
                            <button id="button-2058" class="fr-btn">Libellé</button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6">
        <div id="card-2059" class="fr-card fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group fr-links-group--inline">
                        <li>
                            <a id="link-2060" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                        <li>
                            <a id="link-2061" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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

  • Libellé tag

  • Libellé 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

  • Libellé badge

  • Libellé 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="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-8">
        <div id="card-2076" class="fr-card fr-enlarge-link fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag" id="tag-2077">Libellé tag</p>
                            </li>
                            <li>
                                <p class="fr-tag" id="tag-2078">Libellé tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-8">
        <div id="card-2079" class="fr-card fr-enlarge-link fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-8">
        <div id="card-2080" class="fr-card fr-enlarge-link fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-8">
        <div id="card-2081" class="fr-card fr-enlarge-link fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__end">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-8">
        <div id="card-2082" class="fr-card fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button id="button-2083" class="fr-btn fr-btn--secondary">Libellé</button>
                        </li>
                        <li>
                            <button id="button-2084" class="fr-btn">Libellé</button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-8">
        <div id="card-2085" class="fr-card fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group fr-links-group--inline">
                        <li>
                            <a id="link-2086" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                        <li>
                            <a id="link-2087" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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

  • Libellé tag

  • Libellé 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

  • Libellé badge

  • Libellé 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="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-6">
        <div id="card-2101" class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag" id="tag-2102">Libellé tag</p>
                            </li>
                            <li>
                                <p class="fr-tag" id="tag-2103">Libellé tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6">
        <div id="card-2104" class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6">
        <div id="card-2105" class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6">
        <div id="card-2106" class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__end">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6">
        <div id="card-2107" class="fr-card fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button id="button-2108" class="fr-btn fr-btn--secondary">Libellé</button>
                        </li>
                        <li>
                            <button id="button-2109" class="fr-btn">Libellé</button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-6">
        <div id="card-2110" class="fr-card fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group fr-links-group--inline">
                        <li>
                            <a id="link-2111" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                        <li>
                            <a id="link-2112" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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

  • Libellé tag

  • Libellé 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

  • Libellé badge

  • Libellé 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="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-12">
        <div id="card-2126" class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag" id="tag-2127">Libellé tag</p>
                            </li>
                            <li>
                                <p class="fr-tag" id="tag-2128">Libellé tag</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-12">
        <div id="card-2129" class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                            <li>
                                <p class="fr-badge fr-badge--purple-glycine">Libellé badge</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-12">
        <div id="card-2130" class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-12">
        <div id="card-2131" class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__end">
                        <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
                    </div>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-12">
        <div id="card-2132" class="fr-card fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button id="button-2133" class="fr-btn fr-btn--secondary">Libellé</button>
                        </li>
                        <li>
                            <button id="button-2134" class="fr-btn">Libellé</button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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="fr-col-12 fr-col-md-12">
        <div id="card-2135" class="fr-card fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h3 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h3>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group fr-links-group--inline">
                        <li>
                            <a id="link-2136" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                        <li>
                            <a id="link-2137" href="#" class="fr-link fr-icon-arrow-right-line fr-link--icon-right">Libellé</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr-card__header">
                <div class="fr-card__img">
                    <img class="fr-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.