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 :
- Classe
sipauisur un parent (par exemple le<body>), - composant Article-in-list (article dans une liste),
- composant Titles (titres),
- composant Date (date),
- composant Sources (sources),
- … (tous les composants inclus dans un article)
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">
<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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<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">
<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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<p class="su-title">
<a href="javascript:;">
« La Famille Addams » : 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">
<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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
<span class="su-media-icons-slideshow">Article avec diaporama</span>
</div>
<p class="su-title">
<a href="javascript:;">
« La Famille Addams » : 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">
<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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title">
<a href="javascript:;">
16:7 « La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title">
<a href="javascript:;">
16:9 « La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title">
<a href="javascript:;">
1:1 « La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série Netflix</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<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">
<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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<p class="su-title">
<a href="javascript:;">
« La Famille Addams » : 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">
<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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<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&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&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><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<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 du site, ensuite, de surcharger le background de ce filet via des classes thématiques ou avec du style inline comme style="--couleur-filet-thematique: #maCouleur"…
<style>
.theme-perso {
--couleur-filet-thematique: cornflowerblue;
}
</style>
<section class="su-articles-area su-negative">
<ul class="su-row su-articles-list">
<li class="su-col-md-7 su-margin-bottom-m-sm-max">
<p><strong>Cas standard</strong></p>
<article class="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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<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>
</li>
<li class="su-col-md-7 su-margin-bottom-m-sm-max">
<p><strong>Surcharge via une classe</strong></p>
<article class="su-articles-list-item su-card su-thread su-equal theme-perso">
<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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<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>
</li>
<li class="su-col-md-7">
<p><strong>Surcharge via du css inline</strong></p>
<article class="su-articles-list-item su-card su-thread su-equal" style="--couleur-filet-thematique: aquamarine">
<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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<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>
</li>
</ul>
</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">
<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:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<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.
<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&height=354&focuspoint=45%2C26&cropresize=1&client_id=bpeditorial&sign=20343b3cdcb95f13fa6bd1bdd9a1fa335bdefa510538173037812a34e00985a9">
</div>
</figure>
</div>
<h2 class="su-title">
<a href="javascript:;">
« La Famille Addams » : l’actrice Christina Ricci rejoint le casting de la série</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<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-cardsu-equalsu-not-framed
Classes annexes
su-articles-area(dépendant du composant Article-in-list (article dans une liste))su-articles-list(dépendant du composant Article-in-list (article dans une liste))su-articles-list-item(dépendant du composant Article-in-list (article dans une liste))su-thread(dépendant du composant Article-in-list (article dans une liste))su-metadata(dépendant du composant Article-in-list (article dans une liste))su-ratio-…(dépendant du composant Picture (image))su-main-picture(dépendant du composant Picture (image))su-media-container(dépendant du composant Picture (image))su-title(dépendant du composant Titles (titres))su-premium(dépendant du composant Premium-title (titre premium))su-date(dépendant du composant Date (date))su-source(dépendant du composant Sources (sources))su-cockade-…(dépendant du composant Sources (sources))su-standard-border(dépendant des Helpers (classes d’aide))