Les exemples suivent le métier, la densité et le thème choisis.

Listes et contenu

Liste simple

nouveauClasses hb-listing hb-listing-item text value chevVuetify 2 v-list + v-list-item (habillée par vuetify.scss)Vuetify 3 v-list + v-list-item

Quand l'utiliser

Quand chaque entrée mène quelque part ou porte un réglage : menu d'accueil de tablette, liste de réglages, résultats d'une recherche, choix d'un fournisseur. Pour des données à comparer, un tableau ; pour des entrées éditables en place, une liste de tâches.

Code
<ul class="hb-listing" style="max-width:520px">
  <li><a class="hb-listing-item" href="#"><i class="material-icons">thermostat</i><span class="text">Températures<small>Dernier relevé à 09:12</small></span><span class="hb-badge hb-badge-success">À jour</span><i class="chev"></i></a></li>
  <li><a class="hb-listing-item" href="#" aria-current="true"><i class="material-icons">checklist</i><span class="text">Check-lists<small>3 tâches restantes</small></span><span class="value">3</span><i class="chev"></i></a></li>
  <li><a class="hb-listing-item" href="#"><i class="material-icons">cleaning_services</i><span class="text">Nettoyages<small>Plan de la semaine</small></span><span class="hb-badge hb-badge-warning">En retard</span><i class="chev"></i></a></li>
  <li><button class="hb-listing-item"><i class="material-icons">print</i><span class="text">Imprimante<small>Zebra ZD421 · prête</small></span><span class="hb-dot hb-dot-success" aria-label="Connectée"></span></button></li>
  <li><label class="hb-listing-item"><i class="material-icons">dark_mode</i><span class="text">Thème sombre<small>Suit le système par défaut</small></span><input type="checkbox" class="hb-switch"></label></li>
</ul>

Règles

  • Une entrée est un <a> (navigation), un <button> (action) ou un <label> (réglage avec interrupteur) ; jamais un <div> cliquable.
  • Le chevron (chev) dit qu'on va quelque part ; un réglage n'en a pas. L'entrée courante porte aria-current="true".
  • Hauteur minimale --row (44 px, 40 px en compact, 56 px en touch) ; l'icône est en couleur métier, le sous-texte en petit gris.