Podcast (Podcast)

Le composant Podcast est un méta-composant : il permet d’afficher un podcast dans une liste (en utilisant Article dans une liste) sous plusieurs formes de présentation (variantes de focus, teaser ou cartes). Il est donc un enfant de ces composants et utilise divers sous-composants.

Usage

L’utilisateur peut accéder par le tap ou le clic à la page détail du podcast.
L’utilisateur peut lancer directement la lecture du podcast en utilisant le bouton de lecture.
Le composant peut servir à afficher un podcast à écouter ou une chaîne de podcasts pour accéder à la liste des podcast proposés par cette chaîne.

Spécifications

Un podcast est constitué de plusieurs éléments :

Un canal (ou chaîne)
Un titre (facultatif pour une chaîne)
Une image

Un chapeau descriptif (facultatif)
Une source (facultatif, non utilisé pour une chaîne)
Une date (facultatif, non utilisé pour une chaîne)
Un bouton de lecture (facultatif, non utilisé pour une chaîne)
Une icône média (dans un environnement multi-contenu)

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
composant Article-in-list (article dans une liste),
composant Focus (focus),
composant Teaser (teaser),
composant Card (carte),
composant Channel (canal),
composant Titles (titres),
composant Standfirst (chapeau),
composant Picture (image),

composant Sources (sources),
composant Date (date),
composant Play button (bouton de lecture),
Helpers (classes d’aide).

Podcast focus

Le podcast standard est le podcast focus. Il nécessite donc que la classe su-focus à laquelle on ajoute su-podcast sur l’article pour gérer les marges attendues, et la classe su-ratio-1-1 pour l’image (div parente), les images d’illustration de podcast étant carrées. La construction se fait donc essentiellement comme un focus standard. Les particularités l’ajout du canal avec un <p class="su-channel su-truncate-1"> (su-truncate-1 pour qu’il soit limité à une ligne si nécessaire), l’ajout d’une classe su-truncate-3 sur le titre pour le limité à 3 lignes, et l’ajout d’un bouton de lecture.

<section class="su-articles-area">
    <div class="su-row su-articles-list">
        <article class="su-col-sm-4 su-col-md-6 su-articles-list-item su-focus su-podcast">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-1-1 su-main-picture">
                        <img class="su-media" alt="Podcast Lies" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmJlNDZhMjA0NThkODZlYTI2MzlhODc3NWE3MDAwNDE?width=1260&height=1260&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=cf26e29cb1d709fbfaeeda200eedc047f3d1acd04d8709b7d77652ac5e612cd7">
                    </div>
                </figure>
            </div>
            <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
            <h2 class="su-title su-truncate-3">
                <a href="javascript:;">
                «&nbsp;Lies&nbsp;»&nbsp;: #3&nbsp;Latifa El Amrani, eus Maroko da Deiz-Noaloù</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>
            <button class="su-button su-secondary su-small su-illustration-icon su-play-pause" data-sutoggleclass='{"klass":"su-play"}'>
                <i class="su-icon su-icon-play">lecture</i>
                <i class="su-icon su-icon-pause">pause</i>
                <time datetime="17m">17 min</time>
            </button>
        </article>
    </div>
</section>

Variations

Dans l’exemple ci-dessous, sont affichés 3 podcasts avec des longueurs de titres différentes pour illustrer le comportement de la troncature, sur fond sombre et dans une liste HTML (<ul> + <li>). Il y a l’ajout de su-negative au-dessus, et le déplacement de su-articles-list-item et des classes de colonnage (su-col-…) sur un <li> ajouté au-dessus des articles.

<section class="su-articles-area su-negative">
    <ul class="su-row su-articles-list">
        <li class="su-col-sm-4 su-col-md-6 su-articles-list-item">
            <article class="su-focus su-podcast">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-1-1 su-main-picture">
                            <img class="su-media" alt="Podcast Lies" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmJlNDZhMjA0NThkODZlYTI2MzlhODc3NWE3MDAwNDE?width=1260&height=1260&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=cf26e29cb1d709fbfaeeda200eedc047f3d1acd04d8709b7d77652ac5e612cd7">
                        </div>
                    </figure>
                </div>
                <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
                <h2 class="su-title su-truncate-3">
                    <a href="javascript:;">
                    «&nbsp;Lies&nbsp;»&nbsp;: #3&nbsp;Latifa El Amrani, eus Maroko da Deiz-Noaloù</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>
                <div class="su-buttons-area">
                    <button class="su-button su-secondary su-small su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
                        <i class="su-icon su-icon-play">lecture</i>
                        <i class="su-icon su-icon-pause">pause</i>
                        <time datetime="17m">17 min</time>
                    </button>
                </div>
            </article>
        </li>
        <li class="su-col-sm-4 su-col-md-6 su-articles-list-item">
            <article class="su-focus su-podcast">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-1-1 su-main-picture">
                            <img class="su-media" alt="Podcast «&nbsp;Breizhiz er C’hanada&nbsp;»" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmExZTllMDExZTRlMjI3NTE1MmVlMDQ3YTU5MTZkNjU?width=375&height=375&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=01f2c0322c6b174096ced9af60f5c836e6fd0be825cbe704d3d75f26ac13645c">
                        </div>
                    </figure>
                </div>
                <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
                <h2 class="su-title su-truncate-3">
                    <a href="javascript:;">
                    «&nbsp;Breizhiz er C’hanada&nbsp;»</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>
                <div class="su-buttons-area">
                    <button class="su-button su-secondary su-small su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
                        <i class="su-icon su-icon-play">lecture</i>
                        <i class="su-icon su-icon-pause">pause</i>
                        <time datetime="5m">5 min</time>
                    </button>
                </div>
            </article>
        </li>
        <li class="su-col-sm-4 su-col-md-6 su-articles-list-item">
            <article class="su-focus su-podcast">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-1-1 su-main-picture">
                            <img class="su-media" alt="Podcast «&nbsp;Breizhiz er C’hanada&nbsp;»" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwZGJmODA2Yjk1MDk2NjVjMTAzMGViZWE4NWMxMDVlNTU?width=375&height=375&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=54d926aa2977ab0d662dbdfc3873198bc541337ae1eabf02e3d6318e5fc67da5">
                        </div>
                    </figure>
                </div>
                <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
                <h2 class="su-title su-truncate-3">
                    <a href="javascript:;">
                    Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale.</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>
                <div class="su-buttons-area">
                    <button class="su-button su-secondary su-small su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
                        <i class="su-icon su-icon-play">lecture</i>
                        <i class="su-icon su-icon-pause">pause</i>
                        <time datetime="8m">8 min</time>
                    </button>
                </div>
            </article>
        </li>
    </ul>
</section>

Podcast teaser

Le podcast teaser est construit comme le podcast standard, à l’exception qu’il faut remplacer la classe su-focus par la classe su-teaser, supprimer le chapeau, et enlever la classe de troncature su-truncate-3 du 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-podcast">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-1-1 su-main-picture">
                        <img class="su-media" alt="Podcast Lies" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmJlNDZhMjA0NThkODZlYTI2MzlhODc3NWE3MDAwNDE?width=1260&height=1260&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=cf26e29cb1d709fbfaeeda200eedc047f3d1acd04d8709b7d77652ac5e612cd7">
                    </div>
                </figure>
            </div>
            <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
            <h2 class="su-title">
                <a href="javascript:;">
                «&nbsp;Lies&nbsp;»&nbsp;: #3&nbsp;Latifa El Amrani, eus Maroko da Deiz-Noaloù</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>
            <div class="su-buttons-area">
                <button class="su-button su-secondary su-small su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
                    <i class="su-icon su-icon-play">lecture</i>
                    <i class="su-icon su-icon-pause">pause</i>
                    <time datetime="17m">17 min</time>
                </button>
            </div>
        </article>
    </div>
</section>

Variations

Comme dans les variations du podcast standard, sont affichés ici 3 podcasts avec des longueurs de titres différentes, sur fond sombre et dans une liste HTML. Là aussi, la classe su-negative a été ajoutée au-dessus, et les classes su-articles-list-item, su-col-… ont été déplacées sur les <li>.

Des marges su-margin-bottom-m ont aussi été ajoutées pour les séparer dans cette présentation.

<section class="su-articles-area su-negative">
    <ul class="su-row su-articles-list">
        <li class="su-col-md-18 su-articles-list-item su-margin-bottom-m">
            <article class="su-teaser su-podcast">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-1-1 su-main-picture">
                            <img class="su-media" alt="Podcast Lies" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmJlNDZhMjA0NThkODZlYTI2MzlhODc3NWE3MDAwNDE?width=1260&height=1260&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=cf26e29cb1d709fbfaeeda200eedc047f3d1acd04d8709b7d77652ac5e612cd7">
                        </div>
                    </figure>
                </div>
                <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
                <h2 class="su-title">
                    <a href="javascript:;">
                    «&nbsp;Lies&nbsp;»&nbsp;: #3&nbsp;Latifa El Amrani, eus Maroko da Deiz-Noaloù</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>
                <div class="su-buttons-area">
                    <button class="su-button su-secondary su-small su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
                        <i class="su-icon su-icon-play">lecture</i>
                        <i class="su-icon su-icon-pause">pause</i>
                        <time datetime="17m">17 min</time>
                    </button>
                </div>
            </article>
        </li>
        <li class="su-col-md-18 su-articles-list-item su-margin-bottom-m">
            <article class="su-teaser su-podcast">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-1-1 su-main-picture">
                            <img class="su-media" alt="Podcast Eus ur remziad g'egile" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmExZTllMDExZTRlMjI3NTE1MmVlMDQ3YTU5MTZkNjU?width=375&height=375&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=01f2c0322c6b174096ced9af60f5c836e6fd0be825cbe704d3d75f26ac13645c">
                        </div>
                    </figure>
                </div>
                <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
                <h2 class="su-title">
                    <a href="javascript:;">
                    «&nbsp;Breizhiz er C’hanada&nbsp;»</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>
                <div class="su-buttons-area">
                    <button class="su-button su-secondary su-small su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
                        <i class="su-icon su-icon-play">lecture</i>
                        <i class="su-icon su-icon-pause">pause</i>
                        <time datetime="5m">5 min</time>
                    </button>
                </div>
            </article>
        </li>
        <li class="su-col-md-18 su-articles-list-item">
            <article class="su-teaser su-podcast">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-1-1 su-main-picture">
                            <img class="su-media" alt="Podcast Eus ur remziad g'egile" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwZGJmODA2Yjk1MDk2NjVjMTAzMGViZWE4NWMxMDVlNTU?width=375&height=375&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=54d926aa2977ab0d662dbdfc3873198bc541337ae1eabf02e3d6318e5fc67da5">
                        </div>
                    </figure>
                </div>
                <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
                <h2 class="su-title">
                    <a href="javascript:;">
                    Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale.</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>
                <div class="su-buttons-area">
                    <button class="su-button su-secondary su-small su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
                        <i class="su-icon su-icon-play">lecture</i>
                        <i class="su-icon su-icon-pause">pause</i>
                        <time datetime="8m">8 min</time>
                    </button>
                </div>
            </article>
        </li>
    </ul>
</section>

Podcast carte

La version carte des podcasts se construit elle aussi comme le podcast standard avec quelques différences. Ici, il faut remplacer la classe su-focus par la classe su-card et, afin d’afficher des boutons plus hauts et pleins, changez les su-button su-secondary su-small en su-button su-primary.

Cette carte a une présentation attendue particulière : elle affiche l’image du podcast en fond avec un effet. Pour cela il faut ajouter la classe su-negative à côté de su-podcast pour passer le contenu en blanc et ajouter une propriété personnalisée CSS (variable) appelant l’image sur l’article pour afficher cette image en fond.

Le code spécifique de ce CSS :

style="--background-podcast: url(urlDeMonImage)"

<section class="su-articles-area">
    <div class="su-row su-articles-list">
        <article class="su-col-sm-4 su-col-md-6 su-articles-list-item su-card su-podcast su-negative" style="--background-podcast: url(https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmJlNDZhMjA0NThkODZlYTI2MzlhODc3NWE3MDAwNDE)">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-1-1 su-main-picture">
                        <img class="su-media" alt="Podcast Lies" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmJlNDZhMjA0NThkODZlYTI2MzlhODc3NWE3MDAwNDE?width=1260&height=1260&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=cf26e29cb1d709fbfaeeda200eedc047f3d1acd04d8709b7d77652ac5e612cd7">
                    </div>
                </figure>
            </div>
            <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
            <h2 class="su-title">
                <a href="javascript:;">
                «&nbsp;Lies&nbsp;»&nbsp;: #3&nbsp;Latifa El Amrani, eus Maroko da Deiz-Noaloù</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>
            <div class="su-buttons-area">
                <button class="su-button su-primary su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
                    <i class="su-icon su-icon-play">lecture</i>
                    <i class="su-icon su-icon-pause">pause</i>
                    <time datetime="17m">17 min</time>
                </button>
            </div>
        </article>
    </div>
</section>

Variations

<section class="su-articles-area su-negative">
    <ul class="su-row su-articles-list">
        <li class="su-col-sm-4 su-col-md-6 su-articles-list-item">
            <article class="su-card su-podcast su-negative" style="--background-podcast: url(https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmJlNDZhMjA0NThkODZlYTI2MzlhODc3NWE3MDAwNDE)">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-1-1 su-main-picture">
                            <img class="su-media" alt="Podcast Lies" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmJlNDZhMjA0NThkODZlYTI2MzlhODc3NWE3MDAwNDE?width=1260&height=1260&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=cf26e29cb1d709fbfaeeda200eedc047f3d1acd04d8709b7d77652ac5e612cd7">
                        </div>
                    </figure>
                </div>
                <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
                <h2 class="su-title su-truncate-3">
                    <a href="javascript:;">
                    «&nbsp;Lies&nbsp;»&nbsp;: #3&nbsp;Latifa El Amrani, eus Maroko da Deiz-Noaloù</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>
                <div class="su-buttons-area">
                    <button class="su-button su-primary su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
                        <i class="su-icon su-icon-play">lecture</i>
                        <i class="su-icon su-icon-pause">pause</i>
                        <time datetime="17m">17 min</time>
                    </button>
                </div>
            </article>
        </li>
        <li class="su-col-sm-4 su-col-md-6 su-articles-list-item">
            <article class="su-card su-podcast su-negative" style="--background-podcast: url(https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmExZTllMDExZTRlMjI3NTE1MmVlMDQ3YTU5MTZkNjU)">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-1-1 su-main-picture">
                            <img class="su-media" alt="Podcast Eus ur remziad g'egile" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmExZTllMDExZTRlMjI3NTE1MmVlMDQ3YTU5MTZkNjU?width=375&height=375&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=01f2c0322c6b174096ced9af60f5c836e6fd0be825cbe704d3d75f26ac13645c">
                        </div>
                    </figure>
                </div>
                <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
                <h2 class="su-title su-truncate-3">
                    <a href="javascript:;">
                    «&nbsp;Breizhiz er C’hanada&nbsp;»</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>
                <div class="su-buttons-area">
                    <button class="su-button su-primary su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
                        <i class="su-icon su-icon-play">lecture</i>
                        <i class="su-icon su-icon-pause">pause</i>
                        <time datetime="5m">5 min</time>
                    </button>
                </div>
            </article>
        </li>
        <li class="su-col-sm-4 su-col-md-6 su-articles-list-item">
            <article class="su-card su-podcast su-negative" style="--background-podcast: url(https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwZGJmODA2Yjk1MDk2NjVjMTAzMGViZWE4NWMxMDVlNTU)">
                <div class="su-media-container">
                    <figure>
                        <div class="su-ratio-1-1 su-main-picture">
                            <img class="su-media" alt="Podcast «&nbsp;Breizhiz er C’hanada&nbsp;»" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwZGJmODA2Yjk1MDk2NjVjMTAzMGViZWE4NWMxMDVlNTU?width=375&height=375&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=54d926aa2977ab0d662dbdfc3873198bc541337ae1eabf02e3d6318e5fc67da5">
                        </div>
                    </figure>
                </div>
                <p class="su-channel su-truncate-1">Korn ar brezhoneg / Le coin du breton</p>
                <h2 class="su-title su-truncate-3">
                    <a href="javascript:;">
                    Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale.</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>
                <div class="su-buttons-area">
                    <button class="su-button su-primary su-illustration-icon su-play-pause su-with-time" data-sutoggleclass='{"klass":"su-play"}'>
                        <i class="su-icon su-icon-play">lecture</i>
                        <i class="su-icon su-icon-pause">pause</i>
                        <time datetime="8m">8 min</time>
                    </button>
                </div>
            </article>
        </li>
    </ul>
</section>

Émission

Une émission (une chaîne, un canal…) peut elle aussi être présentée sous forme de focus ou de teaser dans une liste. Cette émission ne comporte ni titre ni de bouton de lecture, juste le visuel, le nom du canal et éventuellement un chapeau descriptif.

Émission focus

Une émission en focus se construit comme un podcast en focus, avec la classe su-podcast-channel à la place de su-podcast et sans troncature su-truncate-1 sur le canal.

<section class="su-articles-area">
    <div class="su-row su-articles-list">
        <div class="su-col-sm-4 su-col-md-6 su-articles-list-item su-focus su-podcast-channel">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-1-1 su-main-picture">
                        <img class="su-media" alt="Podcast «&nbsp;Breizhiz er C’hanada&nbsp;»" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmExZTllMDExZTRlMjI3NTE1MmVlMDQ3YTU5MTZkNjU?width=375&height=375&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=01f2c0322c6b174096ced9af60f5c836e6fd0be825cbe704d3d75f26ac13645c">
                    </div>
                </figure>
            </div>
            <p class="su-channel">Korn ar brezhoneg / Le coin du breton</p>
        </div>
    </div>
</section>

Émission teaser

Une émission en teaser se construit aussi comme un podcast en teaser, avec la classe su-podcast-channel à la place de su-podcast.

<section class="su-articles-area">
    <div class="su-row su-articles-list">
        <div class="su-col-md-18 su-articles-list-item su-teaser su-podcast-channel">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-1-1 su-main-picture">
                        <img class="su-media" alt="Podcast Lies" src="https://qualmedia.ouest-france.fr/v1/pictures/MjAyNDEwNmJlNDZhMjA0NThkODZlYTI2MzlhODc3NWE3MDAwNDE?width=1260&height=1260&focuspoint=50%2C50&cropresize=1&client_id=bpeditorial&sign=cf26e29cb1d709fbfaeeda200eedc047f3d1acd04d8709b7d77652ac5e612cd7">
                    </div>
                </figure>
            </div>
            <h2 class="su-title">
                <a href="javascript:;">
                «&nbsp;Lies&nbsp;»&nbsp;: #3&nbsp;Latifa El Amrani, eus Maroko da Deiz-Noaloù</a></h2><!-- supprimer espace et retour charriot entre </a> et </h2> pour les titres premium-->
            <p class="su-standfirst su-truncate-3">
                Logoden biniou degemer mat an penn ar bed pegeit, kluchañ fiñval komz bern Arzhon-Rewiz gouzañv ennon spontus dale. Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da, a bragoù skeud tach foenn ni kleñved skrivañ solier, dezho kemener peoc’h mall e atav bed. C’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet  ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez.
            </p>
        </div>
    </div>
</section>

Liste des classes disponibles

su-podcast
su-negative
su-podcast-channel

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-focus (dépendant du composant Focus (focus))
su-teaser (dépendant du composant Teaser (teaser))
su-card (dépendant du composant Card (carte))
su-media-container (dépendant du composant Picture (image))
su-main-picture (dépendant du composant Picture (image))
su-ratio-… (dépendant du composant Picture (image))
su-media (dépendant du composant Picture (image))

su-channel (dépendant du composant Channel (canal))
su-title (dépendant du composant Titles (titres))
su-standfirst (dépendant du composant Standfirst (chapeau))
su-metadata (dépendant du composant Article-in-list (article dans une liste))
su-source (dépendant du composant Sources (sources))
su-cockade-… (dépendant du composant Sources (sources))
su-date (dépendant du composant Date (date))
su-button (dépendant du composant Buttons (boutons))
su-secondary (dépendant du composant Buttons (boutons))
su-small (dépendant du composant Buttons (boutons))
su-illustration-icon (dépendant du composant Buttons (boutons))
su-play-pause (dépendant du composant Play-Button (bouton de lecture))
su-with-time (dépendant du composant Play-Button (bouton de lecture))
su-icon-play (dépendant du composant Play-Button (bouton de lecture))
su-icon-pause (dépendant du composant Play-Button (bouton de lecture))
su-time (dépendant du composant Play-Button (bouton de lecture))
su-truncate-… (dépendant des Helpers (classes d’aide))