Badges

Usage

Utilisez les badges (indicateurs numériques) afin de souligner le nombre de mises à jour, d'éléments nouveaux ou non lus associés à un lien.

Valeur par défaut

Utiliser pour souligner des éléments nouveaux ou à jour avec un badge numérique simple gris ou bleu en forme de bouton.

Badge gris :

Boîte de réception 42 courriels non lus

Badge bleu sous forme de bouton :

Inbox 42 unread emails

Source code

Badge gris :

<p><a href="#">Boîte de réception <span class="badge">42<span class="wb-inv"> courriels non lus</span></span></a></p>

Blue button-like badge :

<p><a class="btn btn-primary" href="#">Inbox <span class="badge">42<span class="wb-inv"> unread emails</span></span></a></p>

Badges qui se réduisent seuls

Utilisez-les lorsqu'il n'y a aucun élément nouveau ou non lu. Les badges se réduisent simplement (au moyen du sélecteur empty du CSS).

Aucun contenu à l'intérieur du badge :

Boîte de réception

Source code

Aucun contenu à l'intérieur du badge :

<p><a href="#">... <span class="badge"></span></a></p>

Reference

Guide de style de la Boîte à outils de l'expérience Web - Badges