Listes et contenu

État vide

Deux formes

• Dans une liste : une ligne hb-list-row--empty, poignée et case en pointillé, une phrase en italique. La liste garde la forme d'une liste et les boutons d'ajout restent juste dessous : on comprend qu'il faut ajouter, pas qu'il y a un bug.
• Sur une page sans liste (aucune facture ce mois, aucun fournisseur) : hb-empty, centré, un anneau accent, un titre, une phrase, un bouton. hb-empty--flat sans cadre dans une carte.

<div class="hb-list" style="max-width:560px">
  <div class="hb-list-row hb-list-row--empty"><span class="hb-list-handle"><i class="material-icons">drag_indicator</i></span><input type="checkbox" class="hb-check" disabled aria-hidden="true"><span class="hb-list-title">Aucune tâche pour l'instant : ajoutez une tâche ou un commentaire.</span></div>
</div>
<div class="hb-empty"><span class="ring"></span><h3>Aucune facture ce mois-ci</h3><p>Les factures arrivent par la synchronisation ou par import. Vous pouvez aussi en saisir une.</p><button class="hb-btn hb-btn-primary"><i class="material-icons">add</i>Saisir une facture</button></div>

Règles

• Le texte dit pourquoi c'est vide et quoi faire ; pas de « Aucune donnée » seul.
• Un résultat de filtre vide est un état vide différent : « Aucun produit ne correspond à ces filtres » avec un bouton Réinitialiser, sans anneau.
• Un chargement n'est pas un état vide : squelette ou anneau, voir Progression.