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 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>
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 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>
Version sans image
Il peut arriver qu’un article soit sans image. Afin de préserver l’aspect du teaser, 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-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 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>
Version sponsorisée
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 le composant Badges entre l’image (su-media-container) et le titre.
<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">
<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>
<span class="su-badge" aria-description="Article sponsorisé"></span>
<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>
Teaser avec barre de progression
Si l’article affiché dans le teaser 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-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">
<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 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>
Version avec filet
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.
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 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>
Version sans image
Il en va de même que pour le teaser standard.
<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 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>
Version sponsorisée
Le grand teaser peut aussi être affiché en version sponsorisée avec la classe su-sponsored sur l’article et le composant Badges entre l’image (su-media-container) et le titre.
<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-sponsored">
<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>
<span class="su-badge" aria-description="Article sponsorisé"></span>
<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-->
<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 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>
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 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>
Version sponsorisée
<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 su-sponsored">
<span class="su-badge" aria-description="Article sponsorisé"></span>
<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 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>
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 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>
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 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>
</li>
<li class="su-separator su-margin-bottom-m">
<article class="su-articles-list-item su-teaser su-sponsored">
<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>
<span class="su-badge" aria-description="Article sponsorisé"></span>
<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 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>
</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 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>
</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 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>
</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 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>
</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 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>
</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 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>
</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 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>
</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>
Version sponsorisée
Contrairement aux autres teasers, le badge doit être dans le <div class="su-media-container"> (sous la <figure>) et non en-dessous.
<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-sponsored">
<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>
<span class="su-badge" aria-description="Article sponsorisé"></span>
</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>
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-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-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-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))su-badge(dépendant des Badges (badges))su-progress-bar(dépendant des barre de progression)