Les badges

jdb-badge

Classe de badges JdB.CSS

5 32 45 85 89 99

JdB.CSS ne fournit qu'une seule classe pour les badges :

Classe	Définition
jdb-badge	Crée un badge circulair noir comme `jdb-tag` mais en arrondi

Les badges par défaut

La classe jdb-badge crée un badge circulaire. La couleur par défaut est le noir.

Notifications 5

Code :

<span class="jdb-padding jdb-border jdb-round">
  Notifications <span class="jdb-badge">5</span>
</span>

Les badges colorés

Utilisez une classe jdb-color pour changer la couleur d'un badge :

Messages 7 Appels 2

Code :

<span class="jdb-padding jdb-border jdb-round">
  Messages <span class="jdb-badge jdb-indigo jdb-margin-right">7</span>
  Appels <span class="jdb-badge jdb-teal">2</span>
</span>

Les badges dans les boutons

Utilisez une classe jdb-color pour changer la couleur d'un badge :

Code :

<button class="jdb-button jdb-gray">
  Bouton <span class="jdb-badge jdb-black jdb-margin-left">7</span>
</button>

<button class="jdb-button jdb-green jdb-round-xxl">
  Bouton <span class="jdb-badge jdb-white jdb-margin-left">2</span>
</button>

Les badges dans les listes

1 Alex
2 Julian
3 Sebas
4 Jack

Code :

<ul class="jdb-ul">
  <li><span class="jdb-badge">1</span> Alex</li>
  <li><span class="jdb-badge">2</span> Julian</li>
  <li><span class="jdb-badge">3</span> Sebas</li>
  <li><span class="jdb-badge">4</span> Jack</li>
</ul>

Les badges dans les tableaux

Prénom	Nom	Points
Alex	1 Mino	64
Julian	2 Prod	59
Sebas	3 Chavi	46
Nickson	Row	29
Jack	Rick	45

Code :

<div class="jdb-responsive">
  <table class="jdb-table-all" style="min-width:600px">
    <thead>
      <tr>
        <th>Prénom</th>
        <th>Nom</th>
        <th>Points</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alex</td>
        <td><span class="jdb-badge jdb-amber">1</span> Mino</td>
        <td>64</td>
      </tr>
      <tr>
        <td>Julian</td>
        <td><span class="jdb-badge jdb-blue-gray">2</span> Prod</td>
        <td>59</td>
      </tr>
      <tr>
        <td>Sebas</td>
        <td><span class="jdb-badge jdb-dark-gray">3</span> Chavi</td>
        <td>46</td>
      </tr>
      <!-- ... -->
    </tbody>
  </table>
</div>

Tailles des badges

Par défaut, un badge héritera de la taille de son conteneur.

Les classes de taille de texte jdb-size (jdb-tiny, jdb-small, -large, jdb-xl, jdb-xxl, jdb-xxxl, jdb-jumbo) peuvent être utilisées pour modifier la taille d'un badge :

Vous serez peut-être amené à ajouter un padding supplémentaire aux badges de grande taille :

30 90

Code :

<p><span class="jdb-badge jdb-xxxl jdb-padding jdb-red jdb-margin-right">30</span></p>
<p><span class="jdb-badge jdb-jumbo jdb-padding jdb-white jdb-border jdb-border-red jdb-border-w4">90</span></p>