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

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 class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 taille sm

dans une grille sur 3 à 4 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

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

<div class="fr-card fr-enlarge-link fr-card--sm">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 taille lg

dans une grille sur 6 à 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

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

<div class="fr-card fr-enlarge-link fr-card--lg">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 sans lien étendu à la carte

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 class="fr-card">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 sans icône

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 class="fr-card fr-enlarge-link fr-card--no-icon">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 icône personnalisée

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 class="fr-card fr-enlarge-link fr-icon-warning-fill">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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)

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 class="fr-card fr-enlarge-link fr-card--grey">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 sans bordure

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 class="fr-card fr-enlarge-link fr-card--no-border">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 sans fond

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 class="fr-card fr-enlarge-link fr-card--no-background">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 ombre portée

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 class="fr-card fr-enlarge-link fr-card--shadow">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 sans 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

<div class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
</div>

Carte verticale avec image au ratio d'aspect 32x9

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

Carte verticale avec image au ratio d'aspect 3x2

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

Carte verticale avec image au ratio d'aspect 4x3

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

Carte verticale avec image au ratio d'aspect 1x1

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

Carte verticale avec image au ratio d'aspect 3x4

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

Carte verticale avec image au ratio d'aspect 2x3

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

Carte vidéo au ratio d'aspect par défaut

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

<div class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__vid">
            <div class="fr-responsive-vid">
                <iframe title="Titre de l&#39;iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

Carte vidéo au ratio d'aspect 4x3

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

<div class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__vid">
            <div class="fr-responsive-vid fr-responsive-vid--4x3">
                <iframe title="Titre de l&#39;iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

Carte vidéo au ratio d'aspect 1x1

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

<div class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__vid">
            <div class="fr-responsive-vid fr-responsive-vid--1x1">
                <iframe title="Titre de l&#39;iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

Carte verticale avec taxonomie dans le header

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]

  • label badge

<div class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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>
        <ul class="fr-badges-group">
            <li>
                <p class="fr-badge">label badge</p>
            </li>
        </ul>
    </div>
</div>

Carte verticale avec badges dans le contenu

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

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

  • label badge

  • label badge

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

<div class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-badges-group">
                    <li>
                        <p class="fr-badge">label badge</p>
                    </li>
                    <li>
                        <p class="fr-badge">label 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

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

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

  • label tag

  • label tag

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

<div class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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

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 class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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

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 class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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

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 class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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

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)

détail (optionnel)

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

<div class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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

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

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

  • label badge

  • label badge

détail (optionnel)

détail (optionnel)

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

<div class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-badges-group">
                    <li>
                        <p class="fr-badge">label badge</p>
                    </li>
                    <li>
                        <p class="fr-badge">label 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

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

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

  • label tag

  • label tag

détail (optionnel)

détail (optionnel)

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

<div class="fr-card fr-enlarge-link">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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

  • label badge

  • label badge

détail (optionnel)

détail (optionnel)

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

<div class="fr-card fr-enlarge-link fr-card--sm">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-badges-group">
                    <li>
                        <p class="fr-badge">label badge</p>
                    </li>
                    <li>
                        <p class="fr-badge">label 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

  • label tag

  • label tag

détail (optionnel)

détail (optionnel)

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

<div class="fr-card fr-enlarge-link fr-card--sm">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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

  • label badge

  • label badge

détail (optionnel)

détail (optionnel)

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

<div class="fr-card fr-enlarge-link fr-card--lg">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-badges-group">
                    <li>
                        <p class="fr-badge">label badge</p>
                    </li>
                    <li>
                        <p class="fr-badge">label 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

  • label tag

  • label tag

détail (optionnel)

détail (optionnel)

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

<div class="fr-card fr-enlarge-link fr-card--lg">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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 avec zone d'action

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

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

<div class="fr-card">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
        </div>
        <div class="fr-card__footer">
            <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                <li>
                    <button class="fr-btn fr-btn--secondary">
                        Label
                    </button>
                </li>
                <li>
                    <button class="fr-btn">
                        Label
                    </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 class="fr-card">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 class="fr-btn fr-btn--secondary">
                        Label
                    </button>
                </li>
                <li>
                    <button class="fr-btn">
                        Label
                    </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 class="fr-card fr-card--sm">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 class="fr-btn fr-btn--secondary">
                        Label
                    </button>
                </li>
                <li>
                    <button class="fr-btn">
                        Label
                    </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 class="fr-card fr-card--lg">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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 class="fr-btn fr-btn--secondary">
                        Label
                    </button>
                </li>
                <li>
                    <button class="fr-btn">
                        Label
                    </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 class="fr-card">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <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">
                <li>
                    <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                        label
                    </a>
                </li>
                <li>
                    <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                        label
                    </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

  • label tag

  • label tag

détail (optionnel)

détail (optionnel)

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

<div class="fr-card fr-enlarge-link fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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

  • label tag

  • label tag

détail (optionnel)

détail (optionnel)

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

<div class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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

  • label tag

  • label tag

détail (optionnel)

détail (optionnel)

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

<div class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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

  • label tag

  • label tag

détail (optionnel)

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

<div class="fr-card fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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 class="fr-btn fr-btn--secondary">
                        Label
                    </button>
                </li>
                <li>
                    <button class="fr-btn">
                        Label
                    </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

  • label tag

  • label tag

détail (optionnel)

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

<div class="fr-card fr-card--sm fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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 class="fr-btn fr-btn--secondary">
                        Label
                    </button>
                </li>
                <li>
                    <button class="fr-btn">
                        Label
                    </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

  • label tag

  • label tag

détail (optionnel)

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

<div class="fr-card fr-card--lg fr-card--horizontal">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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 class="fr-btn fr-btn--secondary">
                        Label
                    </button>
                </li>
                <li>
                    <button class="fr-btn">
                        Label
                    </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

  • label tag

  • label tag

détail (optionnel)

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

<div class="fr-card fr-card--horizontal-half">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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 class="fr-btn fr-btn--secondary">
                        Label
                    </button>
                </li>
                <li>
                    <button class="fr-btn">
                        Label
                    </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

  • label tag

  • label tag

détail (optionnel)

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

<div class="fr-card fr-card--horizontal-tier">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h4 class="fr-card__title">
                <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
            </h4>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag">label 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 class="fr-btn fr-btn--secondary">
                        Label
                    </button>
                </li>
                <li>
                    <button class="fr-btn">
                        Label
                    </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

  • label tag

  • label tag

détail (optionnel)

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

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

Grilles de cartes verticales

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

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

  • label tag

  • label tag

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

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

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

  • label badge

  • label badge

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

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

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

détail (optionnel)

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

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

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

détail (optionnel)

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

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

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]

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 class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
        <div class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag">label tag</p>
                            </li>
                            <li>
                                <p class="fr-tag">label 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 class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge">label badge</p>
                            </li>
                            <li>
                                <p class="fr-badge">label 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 class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button class="fr-btn fr-btn--secondary">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="fr-btn">
                                Label
                            </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 class="fr-card">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group">
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </a>
                        </li>
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </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

  • label tag

  • label tag

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

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

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

  • label badge

  • label badge

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

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

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

détail (optionnel)

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

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

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

détail (optionnel)

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

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

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]

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 class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
        <div class="fr-card fr-enlarge-link fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag">label tag</p>
                            </li>
                            <li>
                                <p class="fr-tag">label 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 class="fr-card fr-enlarge-link fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge">label badge</p>
                            </li>
                            <li>
                                <p class="fr-badge">label 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 class="fr-card fr-enlarge-link fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card fr-enlarge-link fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button class="fr-btn fr-btn--secondary">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="fr-btn">
                                Label
                            </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 class="fr-card fr-card--sm">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group">
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </a>
                        </li>
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </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

  • label tag

  • label tag

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

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

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

  • label badge

  • label badge

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

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

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

détail (optionnel)

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

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

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

détail (optionnel)

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

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

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]

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 class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-6">
        <div class="fr-card fr-enlarge-link fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag">label tag</p>
                            </li>
                            <li>
                                <p class="fr-tag">label 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 class="fr-card fr-enlarge-link fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge">label badge</p>
                            </li>
                            <li>
                                <p class="fr-badge">label 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 class="fr-card fr-enlarge-link fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card fr-enlarge-link fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button class="fr-btn fr-btn--secondary">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="fr-btn">
                                Label
                            </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 class="fr-card fr-card--lg">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group">
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </a>
                        </li>
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </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

  • label tag

  • label tag

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

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

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

  • label badge

  • label badge

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

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

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

détail (optionnel)

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

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

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

détail (optionnel)

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

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

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]

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 class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-8">
        <div class="fr-card fr-enlarge-link fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag">label tag</p>
                            </li>
                            <li>
                                <p class="fr-tag">label 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 class="fr-card fr-enlarge-link fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge">label badge</p>
                            </li>
                            <li>
                                <p class="fr-badge">label 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 class="fr-card fr-enlarge-link fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card fr-enlarge-link fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button class="fr-btn fr-btn--secondary">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="fr-btn">
                                Label
                            </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 class="fr-card fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group">
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </a>
                        </li>
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </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

  • label tag

  • label tag

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

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

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

  • label badge

  • label badge

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

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

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

détail (optionnel)

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

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

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

détail (optionnel)

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

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

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]

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 class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-6">
        <div class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag">label tag</p>
                            </li>
                            <li>
                                <p class="fr-tag">label 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 class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge">label badge</p>
                            </li>
                            <li>
                                <p class="fr-badge">label 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 class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button class="fr-btn fr-btn--secondary">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="fr-btn">
                                Label
                            </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 class="fr-card fr-card--sm fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group">
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </a>
                        </li>
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </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

  • label tag

  • label tag

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

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

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

  • label badge

  • label badge

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

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

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

détail (optionnel)

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

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

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

détail (optionnel)

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

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

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]

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 class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-12">
        <div class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-tags-group">
                            <li>
                                <p class="fr-tag">label tag</p>
                            </li>
                            <li>
                                <p class="fr-tag">label 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 class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                    <div class="fr-card__start">
                        <ul class="fr-badges-group">
                            <li>
                                <p class="fr-badge">label badge</p>
                            </li>
                            <li>
                                <p class="fr-badge">label 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 class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <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 class="fr-card fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
                        <li>
                            <button class="fr-btn fr-btn--secondary">
                                Label
                            </button>
                        </li>
                        <li>
                            <button class="fr-btn">
                                Label
                            </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 class="fr-card fr-card--lg fr-card--horizontal">
            <div class="fr-card__body">
                <div class="fr-card__content">
                    <h4 class="fr-card__title">
                        <a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
                    </h4>
                    <p class="fr-card__desc">Lorem [...] elit ut.</p>
                </div>
                <div class="fr-card__footer">
                    <ul class="fr-links-group">
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </a>
                        </li>
                        <li>
                            <a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" href="#">
                                label
                            </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 verticale

Qu’est-ce que le Pass Culture et comment l’obtenir ?

Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…

Détail

<div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-3">
        <div class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <h4 class="fr-card__title">
                    <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a>
                </h4>
                <p class="fr-card__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
                <p class="fr-card__detail">Détail</p>
            </div>
        </div>
    </div>
</div>

Carte verticale image

Qu’est-ce que le Pass Culture et comment l’obtenir ?

Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…

Détail

<div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-3">
        <div class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <h4 class="fr-card__title">
                    <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a>
                </h4>
                <p class="fr-card__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
                <p class="fr-card__detail">Détail</p>
            </div>
            <div class="fr-card__img">
                <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="" />
                <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
            </div>
        </div>
    </div>
</div>

Carte verticale image

Qu’est-ce que le Pass Culture et comment l’obtenir ?

Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…

<div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-3">
        <div class="fr-card fr-enlarge-link">
            <div class="fr-card__body">
                <h4 class="fr-card__title">
                    <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a>
                </h4>
                <p class="fr-card__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
            </div>
            <div class="fr-card__img">
                <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="" />
                <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
            </div>
        </div>
    </div>
</div>

Carte verticale image

Qu’est-ce que le Pass Culture et comment l’obtenir ?

Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…

Détail

<div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-3">
        <div class="fr-card">
            <div class="fr-card__body">
                <h4 class="fr-card__title">
                    <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a>
                </h4>
                <p class="fr-card__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
                <p class="fr-card__detail">Détail</p>
            </div>
            <div class="fr-card__img">
                <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="" />
                <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
            </div>
        </div>
    </div>
</div>

Carte verticale image

Qu’est-ce que le Pass Culture et comment l’obtenir ?

Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…

Détail

<div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-8">
        <div class="fr-card fr-enlarge-link fr-card--horizontal">
            <div class="fr-card__body">
                <h4 class="fr-card__title">
                    <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a>
                </h4>
                <p class="fr-card__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
                <p class="fr-card__detail">Détail</p>
            </div>
            <div class="fr-card__img">
                <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="" />
                <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
            </div>
        </div>
    </div>
</div>

Carte verticale image

Qu’est-ce que le Pass Culture et comment l’obtenir ?

Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…

<div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-8">
        <div class="fr-card fr-enlarge-link fr-card--horizontal">
            <div class="fr-card__body">
                <h4 class="fr-card__title">
                    <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a>
                </h4>
                <p class="fr-card__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
            </div>
            <div class="fr-card__img">
                <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="" />
                <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
            </div>
        </div>
    </div>
</div>

Carte verticale image

Qu’est-ce que le Pass Culture et comment l’obtenir ?

Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…

<div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12 fr-col-md-8">
        <div class="fr-card fr-card--horizontal">
            <div class="fr-card__body">
                <h4 class="fr-card__title">
                    <a href="#" class="fr-card__link">Qu’est-ce que le Pass Culture et comment l’obtenir ?</a>
                </h4>
                <p class="fr-card__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
            </div>
            <div class="fr-card__img">
                <img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="" />
                <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
            </div>
        </div>
    </div>
</div>

Paramètres d’affichage

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