Données

Tuile de chiffre clé

stableClasses hb-tiles hb-tile hb-tile-label hb-tile-value hb-tile-delta hb-tile--text hb-spark

Quand l'utiliser

En tête d'un tableau de bord ou d'une fiche : trois à six indicateurs qui situent l'écran (CA du jour, marge, pertes, relevés faits). Pas pour un nombre isolé dans un texte : Prix et poids.

CA du jour2 184 €+8,2 % vs semaine dernière

Marge31,4 %−1,1 pt vs objectif

Pertes12,5 kg3 produits

Dernier relevé09:12 · conformepar A. Nguyen

Code

<div class="hb-tiles">
  <div class="hb-tile"><span class="hb-tile-label">CA du jour</span><span class="hb-tile-value">2 184 €</span><span class="hb-tile-delta up"><b>+8,2 %</b> vs semaine dernière</span></div>
  <div class="hb-tile"><span class="hb-tile-label">Marge</span><span class="hb-tile-value">31,4 %</span><span class="hb-tile-delta down"><b>−1,1 pt</b> vs objectif</span><svg class="hb-spark" viewBox="0 0 100 28" preserveAspectRatio="none"><path class="fill" d="M0,20 L20,14 L40,16 L60,8 L80,10 L100,4 L100,28 L0,28 Z"/><path class="stroke" d="M0,20 L20,14 L40,16 L60,8 L80,10 L100,4"/><circle class="dot" cx="100" cy="4" r="2.5"/></svg></div>
  <div class="hb-tile"><span class="hb-tile-label">Pertes</span><span class="hb-tile-value">12,5 kg</span><span class="hb-tile-delta">3 produits</span></div>
  <div class="hb-tile hb-tile--text"><span class="hb-tile-label">Dernier relevé</span><span class="hb-tile-value">09:12 · conforme</span><span class="hb-tile-delta">par A. Nguyen</span></div>
</div>

Règles

Le nombre est en --text-number-xl, chiffres tabulaires, avec son unité ; la variation en petit, verte (up) ou rouge (down) seulement sur le nombre, le reste en encre secondaire.
Le sens de la couleur suit le métier : une perte qui baisse est une bonne nouvelle, donc up. L'application choisit la classe, pas le signe.
La courbe (hb-spark) est un SVG de 28 px de haut aux couleurs accent ; elle n'a pas d'axe, c'est une tendance.
Une tuile ne se clique pas ; si elle mène à un détail, c'est un lien textuel dessous.