Listes et contenu

Tâche compacte (tablette)

stableClasses hb-task title time

Quand l'utiliser

Sur la tablette en rayon, quand une tâche se coche et se date sans s'éditer : liste du matin, relevés simples. La liste de tâches complète reste pour magasin.

Relever les températures09:12 Vérifier les DLC du libre-service Nettoyer la vitrine 2 avant l'ouvertureFiche

Code

<div class="hb-card" style="max-width:520px">
  <label class="hb-task"><input type="checkbox" class="hb-check hb-check-touch" checked><span class="title">Relever les températures</span><span class="time">09:12</span></label>
  <label class="hb-task"><input type="checkbox" class="hb-check hb-check-touch"><span class="title">Vérifier les DLC du libre-service</span><input class="hb-field" value="" placeholder="Poids" aria-label="Poids retiré"></label>
  <label class="hb-task"><input type="checkbox" class="hb-check hb-check-touch"><span class="title">Nettoyer la vitrine 2 avant l'ouverture</span><a href="#">Fiche</a></label>
</div>

Règles

Toute la ligne est un <label> : taper n'importe où coche. Hauteur 48 px (56 px en densité touch), case de 28 px.
Le titre tient sur une ligne et se tronque ; un titre long est raccourci à la source.
Une tâche cochée se barre et grise ; l'heure de la coche s'affiche à droite.