Retour

Carte (card)

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

Documentation

Carte verticale

<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 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 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 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 sans 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 fr-card--no-arrow">
            <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>
    </div>
    <div class="fr-col-12 fr-col-md-3">
        <div class="fr-card fr-enlarge-link fr-card--no-arrow">
            <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>
    </div>
    <div class="fr-col-12 fr-col-md-3">
        <div class="fr-card fr-enlarge-link fr-card--no-arrow">
            <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>
    </div>
    <div class="fr-col-12 fr-col-md-3">
        <div class="fr-card fr-enlarge-link fr-card--no-arrow">
            <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>
    </div>
</div>

Carte verticale accentuée

<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 fr-card--grey">
            <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 class="fr-col-12 fr-col-md-3">
        <div class="fr-card fr-enlarge-link fr-card--grey">
            <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 class="fr-col-12 fr-col-md-3">
        <div class="fr-card fr-enlarge-link fr-card--grey">
            <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 class="fr-col-12 fr-col-md-3">
        <div class="fr-card fr-enlarge-link fr-card--grey">
            <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 horizontale

<div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-col-12">
        <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 class="fr-col-12">
        <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 class="fr-col-12">
        <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 class="fr-col-12">
        <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>

Paramètres d’affichage

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