Card (Carte)
Le composant carte est une des formes de présentation d’un Article dans une liste. Elle est donc un enfant de celui-ci et récupère ses attributs de base. Elle peut toutefois servir à afficher d’autres types de contenu, comme un événement. Comme son nom l’indique, elle se présente sous la forme de petites cartes où la photo prend une place importante. Par cette mise-en-forme, elle est un intermédiaire entre le focus et le teaser et elle permet de mettre en valeur des articles tout en prenant un espace réduit. Par ailleurs, grâce à cet aspect de carte, elle est adapté pour être positionnée 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 est généralement un membre d’une collection de cartes similaires, elle ne devrait pas être isolée.
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.
Comme pour les autres présentations d’articles dans une liste, le titre peut être au choix un h2 ou un p.
Sur les exemples ci-dessous, on a rajouté un fond sombre pour mettre en évidence la carte.
<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 su-cockade-of" aria-description="Ouest-France "></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</div>
</section>
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 su-cockade-of" aria-description="Ouest-France "></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</div>
</section>
Gestion du format de la photo
Vous pouvez utiliser un des ratios fixes disponibles pour la taille de la photo grâce aux classes su-ratio-16-7… comme prévu par le composant Image.
<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 su-cockade-of" 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 su-cockade-of" 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-4-3 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:;">
4:3 « 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 su-cockade-of" 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 su-cockade-of" aria-description="Ouest-France "></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</div>
</section>
Vous pouvez aussi utiliser 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 4:3 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-col-lg-6 su-articles-list-item su-card">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-7 su-ratio-4-3-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 su-cockade-of" aria-description="Ouest-France "></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</div>
</section>
Il enfin possible, toujours grâce au composant Image, d’utiliser une orientation en portrait pour la photo.
<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-4-3 su-portrait 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 su-cockade-of" aria-description="Ouest-France "></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</div>
</section>
Cartes à hauteur fixe
Par défaut, une carte s’adapte à son contenu. Les hauteurs de plusieurs cartes côte à côte dans un positionnement flex (comme les colonnes de la grille avec su-row) seront donc variables. Si vous souhaitez, pour des raisons esthétiques, des cartes à hauteur fixe (de la hauteur de la carte la plus haute), vous pouvez ajouter la classe su-equal sur chaque carte.
N. B. – cette classe n’est pas nécessaire pour un carrousel de cartes, le carrousel forçant par défaut la hauteur de ses éléments.
<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 su-cockade-of" 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 su-cockade-of" 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 barre de progression
Si l’article affiché dans la carte est un article avec une notion de temporalité en cours (directs, émission de TV), il est possible d’ajouter une barre de progression sur l’image. Elle doit être ajoutée dans le <div class="su-main-picture">.
<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">
<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">
<progress class="su-progress-bar" max="100" value="75" aria-valuetext="Le média est diffusé à 75%"></progress>
</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 su-cockade-of" aria-description="Ouest-France "></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</div>
</section>
Filet thématique
A cause de son conflit avec les barres de progression et sa faible utilisation, cette fonctionnalité est devenue obsolète avec SipaUI 7.4. Elle sera donc complètement supprimée à partir de SipaUI 8. En attendant, bien qu’elle ne soit plus documentée, pour la rétrocompatibilité, son code est toujours présent dans SipaUI 7.
Gestion de l’absence d’image
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 su-cockade-of" 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 bordure
Il peut arriver que l’on ait besoin de cartes sur une page de la même couleur que le fond de la carte. 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">
<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 su-cockade-of" 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 sponsorisée
La carte d’un article sponsorisé est construite en ajoutant la classe su-sponsored (Article-in-list (article dans une liste)) sur l’article à côté de su-card et le composant Badges après la <figure>.
<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-sponsored">
<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-badge" aria-description="Article sponsorisé"></span>
</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 su-cockade-of" aria-description="Ouest-France Communication"></span>
<time class="su-date" datetime="2022-04-02T20:49:31+02:00">02/04</time>
</div>
</article>
</div>
</section>
Carte évènement
Une carte peut servir à afficher un autre type de contenu qu’un article. Dans ce cas, le contenu et son ordre peuvent changer. Des troncatures peuvent aussi être ajoutées.
Pour une carte d’événement, on peut ajouter un badge sur la photo, séparer les métadonnées en 2 (date et localisation), ajouter le chapeau et gérer la taille du titre et du chapeau avec des troncatures (su-truncate-…) issues des classes d’aide. Il faudra en plus une classe su-event à côté de su-card pour gérer les spécificités CSS, comme les marges entre les éléments.
La classe su-block des classes d’aide devra être ajoutée à côté du su-metadata qui contient la date si celle-ci est composée de divers « morceaux », comme dans l’exemple ci-dessous, pour contrer le flex qui est en standard sur les métadonées des listes d’articles.
<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-event su-standard-border">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" alt="La presqu'île de Crozon" src="https://media.ouest-france.fr/v1/pictures/MjAyNDA5ZTc3M2NmMjA1NTI0NjlkYzZkYjAyNmMyM2I2NzU3NTM?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=d24c4aa04e425c4798b9e85e66742765e6537a2c4bdb49298f1bd83c111910f7">
</div>
</figure>
<span class="su-badge" aria-description="Randonnées"></span>
</div>
<div class="su-metadata su-block">
<time class="su-date" datetime="2022-04-02">Mardi 02 avril</time><span> de </span><time class="su-date" datetime="09:15:00+02:00">09h15</time><span> à </span><time class="su-date" datetime="12:00:00+02:00">12h00</time>
</div>
<h2 class="su-title su-truncate-2">
<a href="javascript:;">
Les Randos d’été : 10 km autour de la pointe de la Varde à Saint-Malo</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<p class="su-standfirst su-truncate-4">Les bénévoles de la Fédération Française de Randonnée et de l’association ABREC vous guident pour ce parcours côtier facile avec de magnifiques points de vue et un passage près du fort d’Arboulé récemment restauré. Paysages emblématiques de la Côte d'Emeraude !</p>
<div class="su-metadata ">
<span class="su-location">Saint-Malo</span>
</div>
</article>
<article class="su-col-md-7 su-articles-list-item su-card su-event su-standard-border">
<div class="su-media-container">
<figure>
<div class="su-ratio-16-9 su-main-picture">
<img class="su-media" alt="La presqu'île de Crozon" src="https://media.ouest-france.fr/v1/pictures/MjAyNDA5ZTc3M2NmMjA1NTI0NjlkYzZkYjAyNmMyM2I2NzU3NTM?width=630&height=354&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=d24c4aa04e425c4798b9e85e66742765e6537a2c4bdb49298f1bd83c111910f7">
</div>
</figure>
<span class="su-badge" aria-description="Randonnées"></span>
</div>
<h2 class="su-title su-truncate-2">
<a href="javascript:;">
Les Randos d’été : 10 km autour de la pointe de la Varde à Saint-Malo</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<div class="su-metadata ">
<span class="su-location">Saint-Malo</span>
</div>
</article>
</div>
</section>
Liste des classes disponibles
su-cardsu-equalsu-not-framedsu-event
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-metadata(dépendant du composant Article-in-list (article dans une liste))su-sponsored(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-location(dépendant du composant Location (localisation))su-standard-border(dépendant des Helpers (classes d’aide))su-truncate-…(dépendant des Helpers (classes d’aide))su-badge(dépendant des Badges (badges))su-standfirst(dépendant des Badges (badges))su-progress-bar(dépendant des barre de progression)