Teaser (Teaser)
Le composant teaser 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. Le teaser est la forme standard de présentation des articles dans une liste. Il est relativement minimaliste (les photos sont petites, voir absentes) afin de pouvoir présenter un grand nombre d’article sans mettre d’accent particulier sur ceux-ci.
Usage
- L’utilisateur peut accéder par le tap ou le clic à la page détail de l’article.
- Un teaser affiche le contenu d’un seul sujet.
Spécifications
Un teaser est constitué de plusieurs éléments :
- Un titre
- Une image (facultatif)
- Un chapeau (facultatif)
- Une source (facultatif)
- Une date (facultatif)
- Une icône média (facultatif)
Bonnes pratiques
- Ne pas mettre d’icône-média sur un teaser, elle masquerait trop la photo.
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),
- composant Standfirst (chapeau),
- composant Description (description),
- … (tous les composants inclus dans un article)
Teaser standard
Le teaser standard ne nécessite que la classe su-teaser sur l’article pour gérer les marges attendues, et la classe su-ratio-1-1 pour l’image (div parente) pour respecter l’attendu (en tout cas dans le thème Ouest-France…)
N. B. – Si le titre est trop long, il sera tronqué avec insertion de « … »
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-18 su-articles-list-item su-teaser">
<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:;">
« 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> et titre long
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-18 su-articles-list-item su-teaser">
<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>
<p class="su-title">
<a href="javascript:;">
Titre long ! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</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 sans image
Dans ce cas, vous avez 2 options :
- supprimer la balise
<figure>et son contenu, - comme pour les cartes ou le focus standard, 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é.
La première option, la plus simple et la meilleure, oblige à avoir une gestion différenciée de l’absence d’image par rapport au focus standard…
La seconde option existe pour n’avoir qu’une seule façon de gérer l’absence d’image et simplifier la création de template. Elle est toutefois moins bonne d’un point de vue performance puisqu’elle génère du DOM inutile et surtout, l’absence de prise en charge du sélecteur :has sur de vieux navigateurs fait que la zone réservée à l’image sera, quand même, affichée sur ceux-ci.
Option 1
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-18 su-articles-list-item su-teaser">
<p class="su-title">
<a href="javascript:;">
Titre long ! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</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>
Option 2
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-18 su-articles-list-item su-teaser">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-main-picture">
<span class="su-visually-hidden">Image absente</span>
</div>
</figure>
</div>
<p class="su-title">
<a href="javascript:;">
Titre long ! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</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>
Teaser sponsorisé
Le teaser peut utiliser l’option d’affichage des articles sponsorisés. Pour cela utiliser la classe su-sponsored sur l’article, à côté de su-articles-list-item et su-teaser ainsi que l’attribut aria-description comme précisé dans le composant Article-in-list.
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-18 su-articles-list-item su-teaser su-sponsored" aria-description="Article sponsorisé">
<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:;">
« 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>
Teaser avec filet
Grâce au composant Article-in-list, il est possible d’ajouter un filet en bas de la photo d’un teaser. À 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-teaser. 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">
<ul class="su-row su-articles-list">
<li class="su-col-md-18 su-margin-bottom-m">
<article class="su-articles-list-item su-teaser su-thread">
<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:;">
« 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>
</li>
<li class="su-col-md-18 su-margin-bottom-m">
<article class="su-articles-list-item su-teaser su-thread theme-perso">
<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:;">
« 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>
</li>
<li class="su-col-md-18">
<article class="su-articles-list-item su-teaser su-thread" style="--couleur-filet-thematique: gold">
<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:;">
« 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>
</li>
</ul>
</section>
Grand teaser
En mode desktop, le grand teaser, utilise une photo en 16/9 et le chapeau en plus du titre, alors qu’en mobile il prend l’apparence d’un teaser standard. Il faut mettre la classe su-teaser-big à la place de su-teaser, et gérer le format de la photo avec les classes (comme précisé dans le composant Picture).
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-18 su-articles-list-item su-teaser-big">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-ratio-16-9-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>
<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-->
<p class="su-standfirst">L’actrice Christina Ricci, connue pour son rôle de Mercredi dans les films de « La Famille Addams », figurera au casting de la série Netflix dérivée du phénomène. Tim Burton sera également aux manettes de la mise en scène.</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 sans image
Il en va de même que pour le teaser standard.
Option 1
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-18 su-articles-list-item su-teaser-big">
<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-->
<p class="su-standfirst">L’actrice Christina Ricci, connue pour son rôle de Mercredi dans les films de « La Famille Addams », figurera au casting de la série Netflix dérivée du phénomène. Tim Burton sera également aux manettes de la mise en scène.</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>
Option 2
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-18 su-articles-list-item su-teaser-big">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-ratio-16-9-lg 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 Netflix</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<p class="su-standfirst">L’actrice Christina Ricci, connue pour son rôle de Mercredi dans les films de « La Famille Addams », figurera au casting de la série Netflix dérivée du phénomène. Tim Burton sera également aux manettes de la mise en scène.</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>
Teaser texte
Le teaser texte est un teaser standard sans la photo. Il porte la classe su-teaser-text.
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-teaser-text">
<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>
Teaser négatif
Il est possible de mettre un teaser sur un fond foncé, grâce à la classe su-negative à mettre à côté de la classe de teaser. Ici, un exemple avec un grand teaser.
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-18 su-articles-list-item su-teaser-big su-negative">
<div class="su-media-container">
<figure>
<div class="su-ratio-1-1 su-ratio-16-9-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>
<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-->
<p class="su-standfirst">L’actrice Christina Ricci, connue pour son rôle de Mercredi dans les films de « La Famille Addams », figurera au casting de la série Netflix dérivée du phénomène. Tim Burton sera également aux manettes de la mise en scène.</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>
Teaser avec séparateur
Il est possible d’ajouter un séparateur sous un article quand on veut couper visuellement l’empilement des articles, en ajoutant la classe su-separator disponible via Article-in-list sur la balise de chaque élément frère de la liste. Ce séparateur gère lui-même les marges, si des marges sont présentes dans le code, elles seront remplacées.
<section class="su-articles-area su-row">
<ul class="su-col-md-12 su-articles-list">
<li class="su-separator su-margin-bottom-m">
<article class="su-articles-list-item su-teaser">
<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:;">
« La Famille Addams » : 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>
</li>
<li class="su-separator su-margin-bottom-m">
<article class="su-articles-list-item su-teaser">
<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:;">
« La Famille Addams » : 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>
</li>
</ul>
</section>
Il est aussi possible d’ajouter ce séparateur au-dessus d’un article si nécessaire, avec la classe su-separator-top.
<section class="su-articles-area su-row">
<ul class="su-col-md-12 su-articles-list">
<li class="su-separator-top su-margin-top-m">
<article class="su-articles-list-item su-teaser">
<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:;">
« La Famille Addams » : 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>
</li>
<li class="su-separator-top su-margin-top-m">
<article class="su-articles-list-item su-teaser">
<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:;">
« La Famille Addams » : 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>
</li>
</ul>
</section>
On peut aussi ajouter ce séparateur au-dessous ou au-dessus d’un article uniquement en mobile ou tablette max, avec les classes su-separator-sm-max, su-separator-top-sm-max, su-separator-md-max ou su-separator-top-md-max.
<section class="su-articles-area su-row">
<ul class="su-col-md-12 su-articles-list">
<li class="su-separator-top-md-max">
<article class="su-articles-list-item su-teaser ">
<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:;">
« La Famille Addams » : 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>
</li>
<li class="su-separator-top-md-max su-margin-top-m">
<article class="su-articles-list-item su-teaser ">
<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:;">
« La Famille Addams » : 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>
</li>
</ul>
</section>
Enfin, comme précisé dans le composant Articles-list, il est possible de masquer le séparateur à l’extrémité (en haut de la liste si on utilise su-separator-top et en bas de celle-ci si on utilise su-separator) avec la classe su-no-ending-separator.
Un exemple utilisant su-separator-top et en négatif :
<section class="su-articles-area su-row su-negative">
<ul class="su-col-md-12 su-articles-list su-no-ending-separator">
<li class="su-separator-top su-margin-top-m">
<article class="su-articles-list-item su-teaser">
<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:;">
« La Famille Addams » : 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>
</li>
<li class="su-separator-top su-margin-top-m">
<article class="su-articles-list-item su-teaser">
<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:;">
« La Famille Addams » : 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>
</li>
</ul>
</section>
Teaser poster
Le teaser poster est une version particulière du teaser à utiliser pour des articles dont l’image principale est le contenu le plus important (affiches, catégories illustrées…). Il sert principalement dans des carrousels et l’image représente la plus grande partie du contenu affiché. Elle s’affiche donc normalement en 4/3, en portrait et le contenu texte doit rester court.
L’article doit porter la classe su-teaser-poster et contenir :
- une image (avec la classe
su-main-picture, plus les classessu-ratio-4-3,su-portraitpour la mettre au bon format), - un titre (
su-title), - une description (facultative, avec la classe
su-description).
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-8 su-articles-list-item su-teaser-poster">
<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:;">
Lorem ipsum dolor</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<div class="su-description">
<p>Consectetur adipisicing elit.</p>
</div>
</article>
</div>
</section>
Variation de taille de titre
En ajoutant les classes su-teaser-poster-small ou su-teaser-poster-big, vous pouvez varier la taille du titre.
<section class="su-articles-area">
<div class="su-row su-articles-list">
<article class="su-col-md-8 su-articles-list-item su-teaser-poster su-teaser-poster-small">
<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:;">
Lorem ipsum dolor</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<p class="su-description">Consectetur adipisicing elit.</p>
</article>
<article class="su-col-md-8 su-articles-list-item su-teaser-poster su-teaser-poster-big">
<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:;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<div class="su-description">
<p>Consectetur adipisicing elit.</p>
</div>
</article>
</div>
</section>
Sur fond sombre
Avec la classe su-negative vous pouvez utiliser un teaser poster sur un fond foncé.
<section class="su-articles-area su-negative">
<div class="su-row su-articles-list">
<article class="su-col-md-8 su-articles-list-item su-teaser-poster">
<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:;">
Lorem ipsum dolor</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
<div class="su-description">
<p>Consectetur adipisicing elit.</p>
</div>
</article>
</div>
</section>
Liste des classes disponibles
su-teasersu-teaser-bigsu-teaser-postersu-teaser-poster-smallsu-teaser-poster-bigsu-negative
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-separator(dépendant du composant Article-in-list (article dans une liste))su-separator-top(dépendant du composant Article-in-list (article dans une liste))su-separator-sm-max(dépendant du composant Article-in-list (article dans une liste))su-separator-top-sm-max(dépendant du composant Article-in-list (article dans une liste))su-separator-md-max(dépendant du composant Article-in-list (article dans une liste))su-separator-top-md-max(dépendant du composant Article-in-list (article dans une liste))su-no-ending-separator(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-standfirst(dépendant du composant Standfirst (chapeau))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-description(dépendant du composant Description (description))