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
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__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
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 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>
dans une grille sur 6 à 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 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>
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">
<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>
<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>
<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>
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 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>
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 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>
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 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>
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 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>
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>
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__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
<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-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>
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__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>
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__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>
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__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>
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__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>
Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et
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>
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 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>
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 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>
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 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>
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 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 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>
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 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 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>
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 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>
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 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>
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 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>
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 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>
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 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>
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 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>
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">
<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>
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-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>
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-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>
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">
<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>
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 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>
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 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>
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 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>
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-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>
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-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>
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-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>
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-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>
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-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>
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-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-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
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 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>
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
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 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>
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
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 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>
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
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 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>
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
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 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>
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
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 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>
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>
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>
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>
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>
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>
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>
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>