JdB.CSS BETA

Les badges

jdb-badge


Partager cette page

Classe de badges JdB.CSS

5 32 45 85 89 99

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

ClasseDéfinition
jdb-badgeCré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énomNomPoints
Alex1 Mino64
Julian2 Prod59
Sebas3 Chavi46
NicksonRow29
JackRick45
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>

Partager cette page