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

  • Le badge est présent sur la photo illustrant un article dans une liste. l’information n’est donc pas visible sur un article présenté sans photo.
  • 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 :

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

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.

Focus

Standard
<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>
Avec une icône média et un texte long

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>

Focus image

Dans le cadre d’un focus-image, la classe su-media-container est inutile, su-focus-image suffit. Mais si vous ajoutez quand même le niveau avec le su-media-container (p. ex. pour avoir un code unique entre les divers type d’articles), cela ne posera pas de souci.

<div class="su-row su-articles-list">
    <article class="su-col-md-8 su-articles-list-item su-focus-image">
        <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>
    </article>
</div>

Carte

<div class="su-row su-articles-list">
    <article class="su-col-md-8 su-articles-list-item su-card">
        <div class="su-media-container">
            <figure>
                <div class="su-ratio-16-9 su-main-picture">
                    <img class="su-media" alt="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>

Teaser standard.

Dans ce cas, il ne devrait pas y avoir de badge (la photo est trop petite)…

<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>
        </div>
    </article>
</div>

… mais si un badge est quand même présent dans le DOM, 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>
    </article>
</div>

Teaser big

Pour ce type d’article, le badge ne sera visible qu’en desktop, où la taille de la photo le permet.

<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>
    </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

Le code a bien été copié !