Badges (Badges)

Les badges permettent d’associer à un article dans une liste, un terme particulier pour le mettre en avant ; cela peut représenter un partenariat, un choix de la rédaction, un contenu « premium »…

Usage

En règle générale, le badge est présent sur la photo illustrant un article dans une liste. Toutefois, pour certains types d’articles (teaser, teaser-text…), le badge pourra être affiché au-dessus du titre.
Si le texte du badge est trop long pour la largeur disponible, il sera tronqué (notamment quand une icône de média est aussi présente).
Il existe visuellement 2 types de badges : le badge standard et le « badge abonné » (reprenant la couleur de l’abonnement).
Il n’est pas possible de mettre plus d’un badge à la fois.

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
Helpers (classes d’aide),
composant Picture (image).

Standard

Pour ajouter un badge il suffit d’un <span> avec la classe su-badge et l’attribut aria-description pour donner le texte à afficher sans ajouter de « bruit » SEO.

<div style="background: var(--gris); padding: var(--marge-s)">
    <span class="su-badge" aria-description="Badge"></span>
</div>

De couleur « abonné »

Pour que le badge soit de couleur « abonné », ce sera avec la classe su-subscription.

<div style="background: var(--gris); padding: var(--marge-s)">
    <span class="su-badge su-subscription" aria-description="Badge"></span>
</div>

Intégré dans un article d’une liste d’article

Focus, carte…

Pour positionner le badge par-dessus la photo de l’article il doit être intégré dans l’élément portant le su-media-container.

<div class="su-row su-articles-list">
 <article class="su-col-md-8 su-articles-list-item su-focus">
     <div class="su-media-container">
         <figure>
             <div class="su-ratio-16-9 su-main-picture">
                 <img class="su-media" alt="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
             </div>
         </figure>
         <span class="su-badge" aria-description="Badge"></span>
     </div>
 </article>
</div>

Si le texte est trop long pour l’espace disponible, il sera tronqué.

<div class="su-row su-articles-list">
 <article class="su-col-md-8 su-articles-list-item su-focus">
     <div class="su-media-container">
         <figure>
             <div class="su-ratio-16-9 su-main-picture">
                 <img class="su-media" alt="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
             </div>
         </figure>
         <span class="su-badge" aria-description="Badge lorem ipsum dolor sit amet, consectetur adipisicing elit."></span>
         <span class="su-media-icons-slideshow">Article avec diaporama</span>
     </div>
 </article>
</div>

Teaser

Dans ce cas où il ne devrait pas y avoir de badge sur la photo (celle-ci étant trop petite), il doit être dans le DOM au-dessus du titre (cf. le composant teaser pour ce cas de figure, c'est lui qui gère son positionnement). Toutefois, si un badge est quand même présent dans le su-media-container, il sera masqué.

<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="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
                </div>
            </figure>
            <span class="su-badge" aria-description="Badge"></span>
        </div>
        <span class="su-badge" aria-description="Badge"></span>
    </article>
</div>

Teaser big

Pour ce type d’article, le badge sur la photo sera visible en desktop uniquement et un badge sera visible au-dessus du titre dans les autres tailles d’écran. Cela implique donc la présence de 2 badges dans le DOM : un dans su-media-container et un après su-media-container.

<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="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
                </div>
            </figure>
            <span class="su-badge" aria-description="Badge"></span>
        </div>
        <span class="su-badge" aria-description="Badge"></span>
    </article>
</div>

Intégré dans un détail article

Là aussi on utilise la classe su-media-container (cf. le composant Picture (image)) afin de bien positionner le badge sur la photo.

<div class="su-row">
    <article class="su-article su-col-lg-18">
            <div class="su-media-container">
                <figure>
                    <div class="su-ratio-16-9 su-main-picture">
                        <img class="su-media" alt="Le golfe du Morbihan fait partie du club des plus belles baies du monde." src="https://media.ouest-france.fr/v1/pictures/MjAyMTA4NDc1N2Y3MmFiZGFkNzAxMzk4Nzc3Y2VjNjgxNmVhNWQ?width=940&amp;height=528&amp;focuspoint=50%2C25&amp;cropresize=1&amp;client_id=bpeditorial&amp;sign=e364b2b038ab762a73ddd43eaa9a085dc76186579273bd9f402ab565bd546410">
                    </div>
                    <figcaption>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.</figcaption>
                </figure>
                <span class="su-badge" aria-description="Badge lorem ipsum dolor sit amet, consectetur adipisicing elit."></span>
                <button class="su-button-fullscreen" data-oftriggerresize="" data-ofmodal="carrousel-plein-ecran"><span>Voir en plein écran</span></button>
            </div>
    </article>
</div>

Liste des classes disponibles

su-badge
su-subscription
su-secondary

Classes annexes

su-media-container (dépendant du composant Picture (image))