Card (Carte)

Le composant carte est une des formes de présentation d’un Article dans une liste. Il est donc un enfant de celui-ci et récupère ses attributs de base. Comme son nom l’indique, il se présente sous la forme de petites cartes où la photo est assez importante. Par cette mise-en-forme, il est un intermédiaire entre le focus et le teaser et il permet de mettre en valeur des articles tout en prenant un espace réduit. Par ailleurs, grâce à cet aspect de carte, il est adapté pour être positionné sur un fond de couleur.

Usage

  • L’utilisateur peut accéder par le tap ou le clic à la page détail de l’article.
  • Une carte affiche le contenu d’un seul sujet.
  • Une carte individuelle est généralement un membre d’une collection de cartes similaires, et non une carte isolée.

Spécifications

Une carte est constituée de plusieurs éléments :

  • Une image.
  • Un titre.
  • Une source (facultatif).
  • Une date (facultatif).
  • Une icône média (facultatif).
  • Un filet thématique (facultatif).

Bonnes pratiques

  • Une carte s’affiche sur un fond de couleur.

Style & code

Dépendances :

Carte standard

La carte standard ne nécessite que la classe su-card sur l’article pour gérer les styles attendus. Par contre, il est impératif qu’elle soit intégrée dans un parent en flex. Pour ça, vous pouvez utiliser la grille de SipaUI comme dans les exemples ci-dessous, ou utiliser vos propres CSS si vous avez besoin de cartes avec une largeur spécifique ou d'un nombre supérieur à ce que la grille peut gérer (p. ex. pour un carrousel)…

Sur les exemples ci-dessous, on a rajouté un fond sombre pour mettre en évidence la carte.

Version avec un titre d’article en h2

<section class="su-articles-area" style="background: DimGray; padding: 10px">
    <div class="su-row su-articles-list">
        <article class="su-col-md-8 su-articles-list-item su-card">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;">
                «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix
                </a>
            </h2>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
    </div>
</section>

Version avec un titre d’article en <p>

<section class="su-articles-area" style="background: DimGray; padding: 10px">
    <div class="su-row su-articles-list">
        <article class="su-col-md-8 su-articles-list-item su-card">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                    </div>
                </figure>
            </div>
            <p class="su-title">
                <a href="javascript:;">
                «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix
                </a>
            </p>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
    </div>
</section>

Version avec une icône de média

<section class="su-articles-area" style="background: DimGray; padding: 10px">
    <div class="su-row su-articles-list">
        <article class="su-col-md-8 su-articles-list-item su-card">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                    </div>
                </figure>
                <span class="su-media-icons-slideshow">Article avec diaporama</span>
            </div>
            <p class="su-title">
                <a href="javascript:;">
                «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix
                </a>
            </p>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
    </div>
</section>

Carte avec différents ratios de photos

Vous pouvez utiliser un des 3 ratios disponibles pour la taille de la photo grâce aux classes su-ratio-16-7… comme prévu par le composant Image. Dans l’exemple ci-dessous, on utilise du 16:7, du 16:9 et du 1:1.

<section class="su-articles-area" style="background: DimGray; padding: 10px">
    <div class="su-row su-articles-list">
        <article class="su-col-md-6 su-articles-list-item su-card">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-7 su-main-picture">
                        <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;">
                16:7 «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix
                </a>
            </h2>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
        <article class="su-col-md-6 su-articles-list-item su-card">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;">
                16:9 «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix
                </a>
            </h2>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
        <article class="su-col-md-6 su-articles-list-item su-card">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-1-1 su-main-picture">
                        <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;">
                1:1 «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix
                </a>
            </h2>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
    </div>
</section>

Carte à ratios de photos variables

Il est aussi possible, toujours comme le permet le composant Image, de mettre un ratio variable en fonction de la taille de l’écran, grâce aux classes su-ratio-16-7-md etc… Dans l’exemple ci-dessous, la photo est en 1:1 en desktop et en 16:7 dans les autres cas…

<section class="su-articles-area" style="background: DimGray; padding: 10px">
    <div class="su-row su-articles-list">
        <article class="su-col-md-8 su-articles-list-item su-card">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-7 su-ratio-1-1-lg su-main-picture">
                        <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                    </div>
                </figure>
            </div>
            <p class="su-title">
                <a href="javascript:;">
                «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série Netflix
                </a>
            </p>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
    </div>
</section>

Carte à hauteur fixe

Il est des cas où, pour des raisons esthétiques, les cartes doivent avoir une hauteur fixe. C’est par exemple le cas pour un carrousel de cartes. Il faut alors ajouter la classe su-equal pour bloquer la hauteur de toutes les cartes sur la carte la plus haute.

<section class="su-articles-area" style="background: DimGray; padding: 10px">
    <div class="su-row su-articles-list">
        <article class="su-col-md-6 su-articles-list-item su-card su-equal">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;">
                «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série
                </a>
            </h2>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
        <article class="su-col-md-6 su-articles-list-item su-card su-equal">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="Le groupe Tomm-Kozh animera la soirée de musique bretonne" src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzMTM3NTU0YjM3MWNlNmNmMTRjN2VhMzEzYWUyZTI5OGI?width=630&amp;height=354&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=aef291b5d15eb30cd85bdf84d0ce30af77aeeaf7d554d8d37f47ebe073933df0">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;">
                Saint-Gildas-de-Rhuys. Brezhoneg e Rewis promeut la culture bretonne dans la Presqu’île de Rhuys
                </a>
            </h2>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-03-24T12:00:11+01:00">12h00</time>
            </div>
        </article>
    </div>
</section>

Carte avec filet thématique

Grâce au composant Article-in-list, il est possible d’ajouter un filet en bas d’une carte. À ce jour, SipaUI ne propose qu’une couleur pour ce filet (cf. l’explication dans le composant Article-in-list). Pour ajouter ce filet, ajouter une classe su-thread, à côté de su-card. Charge aux CSS de votre site, ensuite, de surcharger le background de ce filet…

<section class="su-articles-area" style="background: DimGray; padding: 10px">
    <div class="su-row su-articles-list">
        <article class="su-col-md-7 su-articles-list-item su-card su-thread su-equal">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;">
                «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série
                </a>
            </h2>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
    </div>
</section>

Carte avec article à image manquante

Il peut arriver qu’un article soit sans image. Afin de préserver l’aspect de la carte dans ce cas-là, il faut garder la balise <figure> et le <div class="su-main-picture">, la balise <img> étant remplacée par un <span class="su-visually-hidden">Image absente</span> qui permet une compréhension de la structure et donc une meilleure accessibilité.

<section class="su-articles-area" style="background: DimGray; padding: 10px">
    <div class="su-row su-articles-list">
        <article class="su-col-md-7 su-articles-list-item su-card su-equal">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <span class="su-visually-hidden">Image absente</span>
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;" class="surcharge-storybook">
                «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série
                </a>
            </h2>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
    </div>
</section>

Carte avec la même couleur de fond que la page

Il peut arriver que l’on ait besoin de cartes sans différenciation de fond par rapport à la page. Dans ce cas, grâce à la classe su-standard-border des Helpers (classes d’aide), il est possible de démarquer ces cartes avec une bordure. Une autre solution est d’utiliser la classe su-not-framed sur les articles afin de supprimer le fond et le padding interne qui n’est pas nécessaire dans ce cas.

<section class="su-articles-area">
    <div class="su-row su-articles-list">
        <article class="su-col-md-7 su-articles-list-item su-card su-standard-border su-equal">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;" class="surcharge-storybook">
                «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série
                </a>
            </h2>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
        <article class="su-col-md-7 su-articles-list-item su-card su-not-framed su-equal">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="L’actrice Christina Ricci dans le rôle de Mercredi Addams dans les films des années 1990." src="https://media.ouest-france.fr/v1/pictures/MjAyMjAzNDVkZjFmMjM1NzhiNmYzOTllNzYyYTJkMDVkMTE0ODE?width=630&amp;height=354&amp;focuspoint=45%2C26&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;" class="surcharge-storybook">
                «&nbsp;La Famille Addams&nbsp;»&nbsp;: l’actrice Christina Ricci rejoint le casting de la série
                </a>
            </h2>
            <div class="su-metadata ">
                <span class="su-source" aria-description="Ouest-France "></span>
                <time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
            </div>
        </article>
    </div>
</section>

Liste des classes disponibles

  • su-card
  • su-equal
  • su-not-framed

Classes annexes

Le code a bien été copié !