Surfaces

Carte

stableClasses hb-card hb-card-h hb-card-h__title hb-card-h__sub hb-card-h__icon hb-card-h__actions hb-card-body hb-card-foot hb-card-banner hb-sunkenVuetify 2 v-card outlined (habillée par vuetify.scss)Vuetify 3 v-card variant="outlined"

Anatomie

En-tête (hb-card-h : icône métier, titre h3, sous-titre, actions à droite), corps (hb-card-body, 16 × 24 px), pied (barre d'actions). Un bloc en retrait (hb-sunken) groupe des champs ou met un encadré dans le corps.

Températures

Dernier relevé à 09:12

Trois relevés par jour, un par vitrine et par chambre froide.

Vitrine 1: 2,1 °C
Vitrine 2: 1,8 °C
Chambre froide: 0,4 °C

Code

<div class="hb-card" style="max-width:560px">
  <div class="hb-card-h"><span class="hb-card-h__icon"><i class="material-icons">thermostat</i></span><h2>Températures</h2><span class="hb-card-h__sub">Dernier relevé à 09:12</span><div class="hb-card-h__actions"><button class="hb-btn hb-btn-icon" aria-label="Imprimer"><i class="material-icons">print</i></button></div></div>
  <div class="hb-card-body hb-stack">
    <p style="margin:0">Trois relevés par jour, un par vitrine et par chambre froide.</p>
    <div class="hb-sunken" style="padding:var(--space-3) var(--space-4)"><dl class="hb-kv" style="gap:4px var(--space-4)"><dt>Vitrine 1</dt><dd>2,1 °C</dd><dt>Vitrine 2</dt><dd>1,8 °C</dd><dt>Chambre froide</dt><dd>0,4 °C</dd></dl></div>
  </div>
  <div class="hb-card-foot"><button class="hb-btn hb-btn-quiet">Historique</button><button class="hb-btn hb-btn-primary"><i class="material-icons">add</i>Nouveau relevé</button></div>
</div>

Règles

Une carte par sujet ; pas de carte dans une carte (filet ou zone en retrait à la place).
Le titre de carte est un h2 ou h3 selon la page, toujours en style h3 (encre, pas de couleur métier).
Une carte qui n'est qu'un conteneur de liste ou de tableau n'a pas de hb-card-body : la liste (hb-list) ou le tableau (hb-table-wrap) portent déjà filet, rayon et ombre.
Bandeau teinté en tête d'une fiche : voir Page et en-tête.