DSFR v1.12.1

Retour

Carte (card)

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

Documentation

Dépréciation

Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes

Carte verticale

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

Carte verticale image

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

Carte verticale image

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

Carte verticale image

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

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

Détail

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

Carte verticale image

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

Carte verticale image

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

Carte verticale image

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

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

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

Paramètres d’affichage

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