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.
Documentationdans une grille sur 4 à 6 colonnes en version desktop
<div id="card-1525" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
dans une grille sur 3 à 4 colonnes en version desktop
<div id="card-1528" class="fr-card fr-enlarge-link fr-card--sm">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
dans une grille sur 6 à 12 colonnes en version desktop
<div id="card-1531" class="fr-card fr-enlarge-link fr-card--lg">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
<div id="card-1535" class="fr-card fr-enlarge-link fr-card--no-icon">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1538" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
<div id="card-1542" class="fr-card fr-enlarge-link fr-card--grey">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
<div id="card-1545" class="fr-card fr-enlarge-link fr-card--no-border">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
<div id="card-1548" class="fr-card fr-enlarge-link fr-card--no-background">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
<div id="card-1551" class="fr-card fr-enlarge-link fr-card--shadow">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
<div id="card-1555" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
</div>
<div id="card-1559" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img fr-ratio-32x9" src="../../../example/img/placeholder.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 id="card-1562" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img fr-ratio-3x2" src="../../../example/img/placeholder.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 id="card-1565" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img fr-ratio-4x3" src="../../../example/img/placeholder.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 id="card-1568" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img fr-ratio-1x1" src="../../../example/img/placeholder.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 id="card-1571" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img fr-ratio-3x4" src="../../../example/img/placeholder.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 id="card-1574" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img fr-ratio-2x3" src="../../../example/img/placeholder.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 id="card-1578" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
<ul class="fr-badges-group">
<li>
<p class="fr-badge">label badge</p>
</li>
</ul>
</div>
</div>
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
<div id="card-1582" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-badges-group">
<li>
<p class="fr-badge fr-badge--purple-glycine">label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--purple-glycine">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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1587" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1588">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1589">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>
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)
<div id="card-1592" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1595" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
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)
<div id="card-1598" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__end">
<p class="fr-card__detail">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1601" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
<div class="fr-card__end">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
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
<div id="card-1604" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-badges-group">
<li>
<p class="fr-badge fr-badge--purple-glycine">label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--purple-glycine">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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1609" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1610">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1611">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>
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
<div id="card-1614" class="fr-card fr-enlarge-link fr-card--sm">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-badges-group">
<li>
<p class="fr-badge fr-badge--purple-glycine">label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--purple-glycine">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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1619" class="fr-card fr-enlarge-link fr-card--sm">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1620">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1621">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>
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
<div id="card-1624" class="fr-card fr-enlarge-link fr-card--lg">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-badges-group">
<li>
<p class="fr-badge fr-badge--purple-glycine">label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--purple-glycine">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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1629" class="fr-card fr-enlarge-link fr-card--lg">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1630">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1631">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>
<div id="card-1635" class="fr-card">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
Intitulé de la carte
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
<div id="card-1639" class="fr-card">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1642" class="fr-card">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1645" class="fr-card fr-card--sm">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1648" class="fr-card fr-card--lg">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1652" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a role="link" aria-disabled="true">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
dans une grille sur 4 à 6 colonnes en version desktop
<div id="card-1658" class="fr-card">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<li>
<button class="fr-btn fr-btn--secondary" id="button-1659">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1660">
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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1665" class="fr-card">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
<div class="fr-card__footer">
<ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<li>
<button class="fr-btn fr-btn--secondary" id="button-1666">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1667">
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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1672" class="fr-card fr-card--sm">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
<div class="fr-card__footer">
<ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<li>
<button class="fr-btn fr-btn--secondary" id="button-1673">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1674">
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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1679" class="fr-card fr-card--lg">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
<div class="fr-card__footer">
<ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<li>
<button class="fr-btn fr-btn--secondary" id="button-1680">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1681">
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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1686" class="fr-card">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
<div class="fr-card__footer">
<ul class="fr-links-group fr-links-group--inline">
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1687" href="#">label</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1688" 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>
dans une grille sur 6 à 8 colonnes en version desktop
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1694" class="fr-card fr-enlarge-link fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1695">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1696">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>
dans une grille sur 4 à 6 colonnes en version desktop
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1701" class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1702">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1703">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>
dans une grille sur 8 à 12 colonnes en version desktop
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1708" class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1709">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1710">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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1717" class="fr-card fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1718">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1719">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" id="button-1720">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1721">
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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1728" class="fr-card fr-card--sm fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1729">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1730">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" id="button-1731">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1732">
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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1739" class="fr-card fr-card--lg fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1740">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1741">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" id="button-1742">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1743">
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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1750" class="fr-card fr-card--horizontal-half">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1751">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1752">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" id="button-1753">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1754">
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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1761" class="fr-card fr-card--horizontal-tier">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1762">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1763">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" id="button-1764">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1765">
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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
<div id="card-1772" class="fr-card fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1773">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1774">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" id="button-1775">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1776">
Label
</button>
</li>
</ul>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img fr-ratio-32x9" src="../../../example/img/placeholder.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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
<div id="card-1791" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1792">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1793">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 id="card-1794" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-badges-group">
<li>
<p class="fr-badge fr-badge--purple-glycine">label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--purple-glycine">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 id="card-1795" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
<div id="card-1796" class="fr-card fr-enlarge-link">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__end">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
<div id="card-1797" class="fr-card">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<li>
<button class="fr-btn fr-btn--secondary" id="button-1798">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1799">
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 id="card-1800" class="fr-card">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-links-group fr-links-group--inline">
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1801" href="#">label</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1802" 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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
<div id="card-1816" class="fr-card fr-enlarge-link fr-card--sm">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1817">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1818">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 id="card-1819" class="fr-card fr-enlarge-link fr-card--sm">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-badges-group">
<li>
<p class="fr-badge fr-badge--purple-glycine">label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--purple-glycine">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 id="card-1820" class="fr-card fr-enlarge-link fr-card--sm">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
<div id="card-1821" class="fr-card fr-enlarge-link fr-card--sm">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__end">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-sm-6 fr-col-md-4 fr-col-lg-3">
<div id="card-1822" class="fr-card fr-card--sm">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<li>
<button class="fr-btn fr-btn--secondary" id="button-1823">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1824">
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 id="card-1825" class="fr-card fr-card--sm">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-links-group fr-links-group--inline">
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1826" href="#">label</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1827" 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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-6">
<div id="card-1841" class="fr-card fr-enlarge-link fr-card--lg">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1842">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1843">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 id="card-1844" class="fr-card fr-enlarge-link fr-card--lg">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-badges-group">
<li>
<p class="fr-badge fr-badge--purple-glycine">label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--purple-glycine">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 id="card-1845" class="fr-card fr-enlarge-link fr-card--lg">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-6">
<div id="card-1846" class="fr-card fr-enlarge-link fr-card--lg">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__end">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-6">
<div id="card-1847" class="fr-card fr-card--lg">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<li>
<button class="fr-btn fr-btn--secondary" id="button-1848">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1849">
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 id="card-1850" class="fr-card fr-card--lg">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-links-group fr-links-group--inline">
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1851" href="#">label</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1852" 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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-8">
<div id="card-1867" class="fr-card fr-enlarge-link fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1868">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1869">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 id="card-1870" class="fr-card fr-enlarge-link fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-badges-group">
<li>
<p class="fr-badge fr-badge--purple-glycine">label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--purple-glycine">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 id="card-1871" class="fr-card fr-enlarge-link fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-8">
<div id="card-1872" class="fr-card fr-enlarge-link fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__end">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-8">
<div id="card-1873" class="fr-card fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<li>
<button class="fr-btn fr-btn--secondary" id="button-1874">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1875">
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 id="card-1876" class="fr-card fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-links-group fr-links-group--inline">
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1877" href="#">label</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1878" 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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-6">
<div id="card-1892" class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1893">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1894">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 id="card-1895" class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-badges-group">
<li>
<p class="fr-badge fr-badge--purple-glycine">label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--purple-glycine">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 id="card-1896" class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-6">
<div id="card-1897" class="fr-card fr-enlarge-link fr-card--sm fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__end">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-6">
<div id="card-1898" class="fr-card fr-card--sm fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<li>
<button class="fr-btn fr-btn--secondary" id="button-1899">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1900">
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 id="card-1901" class="fr-card fr-card--sm fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-links-group fr-links-group--inline">
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1902" href="#">label</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1903" 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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-12">
<div id="card-1917" class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-tags-group">
<li>
<p class="fr-tag" id="tag-1918">label tag</p>
</li>
<li>
<p class="fr-tag" id="tag-1919">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 id="card-1920" class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<ul class="fr-badges-group">
<li>
<p class="fr-badge fr-badge--purple-glycine">label badge</p>
</li>
<li>
<p class="fr-badge fr-badge--purple-glycine">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 id="card-1921" class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__start">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-12">
<div id="card-1922" class="fr-card fr-enlarge-link fr-card--lg fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
<p class="fr-card__desc">Lorem [...] elit ut.</p>
<div class="fr-card__end">
<p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
</div>
</div>
</div>
<div class="fr-card__header">
<div class="fr-card__img">
<img class="fr-responsive-img" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
</div>
</div>
</div>
</div>
<div class="fr-col-12 fr-col-md-12">
<div id="card-1923" class="fr-card fr-card--lg fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-btns-group fr-btns-group--inline-reverse fr-btns-group--inline-lg">
<li>
<button class="fr-btn fr-btn--secondary" id="button-1924">
Label
</button>
</li>
<li>
<button class="fr-btn" id="button-1925">
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 id="card-1926" class="fr-card fr-card--lg fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a href="#">Intitulé de la carte (sur lequel se trouve le lien)</a>
</h3>
</div>
<div class="fr-card__footer">
<ul class="fr-links-group fr-links-group--inline">
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1927" href="#">label</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-1928" 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>