Les statistiques

Statiques simples

JdB.CSS ne dispose pas de classes particulières pour les statistiques, mais vous donne tout de même la possibilité de créer des affichages de vos statistiques en combinant différentes classes.

Une statistique peut afficher une valeur avec une étiquette au-dessus ou en dessous.

6,280

Téléchargements

Code :

<div class="jdb-container jdb-uppercase jdb-cell jdb-center">
  <div class="jdb-xxxl">6,280</div>
  <div class="jdb-md">Téléchargements</div>
</div>

Pages vues

97,251

Code :

<div class="jdb-container jdb-uppercase jdb-cell jdb-center">
  <div class="jdb-md">Pages vues</div>
  <div class="jdb-xxxl">97,251</div>
</div>

Groupe statiques

Un groupe de statistiques

Favoris

32,500

Pages vues

97,251

Membres

Code :

<div class="jdb-uppercase jdb-center">
  <div class="jdb-padding jdb-cell jdb-mobile">
    <div class="jdb-xxxl">32</div>
    <div class="jdb-md">Favoris</div>
  </div>
  <div class="jdb-padding jdb-cell jdb-mobile">
    <div class="jdb-xxxl">32,500</div>
    <div class="jdb-md">Pages vues</div>
  </div>
  <div class="jdb-padding jdb-cell jdb-mobile">
    <div class="jdb-xxxl">97,251</div>
    <div class="jdb-md">Membres</div>
  </div>
</div>

Une statistique peut aussi contenir une icône

VOLS

25,600

Clients

260

Collaborateurs

Code :

<div class="jdb-uppercase jdb-center">
  <div class="jdb-padding jdb-cell jdb-mobile">
    <div class="jdb-xxxl"><i class="fa fa-plane" aria-hidden="true"></i> 45</div>
    <div class="jdb-md">VOLS</div>
  </div>
  <div class="jdb-padding jdb-cell jdb-mobile">
    <div class="jdb-xxxl"><i class="fa fa-users" aria-hidden="true"></i> 25,600</div>
    <div class="jdb-md">Clients</div>
  </div>
  <div class="jdb-padding jdb-cell jdb-mobile">
    <div class="jdb-xxxl"><i class="fa fa-user-tie" aria-hidden="true"></i> 260</div>
    <div class="jdb-md">Collaborateurs</div>
  </div>
</div>