Navigation

Page et en-tête

stableClasses hb-page hb-page--narrow hb-page-title hb-page-sub hb-head hb-head__actions hb-card-bannerVuetify 2 v-app-bar avec le crochet hb-topbar pour la barre du haut

Page

hb-page pose les gouttières (24 px, 16 px sur téléphone) et empile les sections à 24 px. hb-head aligne titre et actions sur la même ligne de base, les actions passant à la ligne sur téléphone.

Factures

312 factures · 12 à vérifier

Contenu de la page.

Code

<div class="hb-page" style="background:var(--surface);border-radius:var(--radius-lg)">
  <div class="hb-head">
    <div><ol class="hb-breadcrumb"><li><a href="#">Achats</a></li><li aria-current="page">Factures</li></ol><h1 class="hb-page-title">Factures</h1><p class="hb-page-sub">312 factures · 12 à vérifier</p></div>
    <div class="hb-head__actions"><button class="hb-btn"><i class="material-icons">download</i>Exporter</button><button class="hb-btn hb-btn-primary"><i class="material-icons">add</i>Saisir une facture</button></div>
  </div>
  <div class="hb-card hb-card-body hb-small">Contenu de la page.</div>
</div>

Bandeau de fiche

La tête d'une fiche (check-list, facture) est un hb-card-banner en haut de sa carte : fond métier doux, titre et description éditables, métadonnées, et la barre d'outils calée en haut à droite.

Corps de la fiche.

Code

<section class="hb-card" style="max-width:720px">
  <div class="hb-card-banner"><div class="hb-head">
    <div class="hb-stack" style="gap:var(--space-1);flex:1 1 320px;min-width:0"><div class="hb-h1" style="font-size:24px;line-height:32px">Facture Pomona du 12/10/2026</div><div class="hb-list-meta"><span class="hb-badge hb-badge-warning">À vérifier</span><span>Reçue le 13/10/2026</span><span>·</span><span>1 284,60 € HT</span></div></div>
    <div class="hb-head__actions hb-toolbar"><button class="hb-btn hb-btn-icon" aria-label="Imprimer"><i class="material-icons">print</i></button><button class="hb-btn hb-btn-icon" aria-label="Archiver"><i class="material-icons">inventory_2</i></button><span class="hb-toolbar-sep"></span><button class="hb-btn hb-btn-icon hb-btn-icon-danger" aria-label="Supprimer"><i class="material-icons">delete</i></button></div>
  </div></div>
  <div class="hb-card-body hb-small">Corps de la fiche.</div>
</section>

Règles

Un titre de page par écran, en hb-page-title (couleur métier) ; le sous-titre donne le compte ou le contexte.
L'action principale de la page est à droite de l'en-tête, pas en bas ; les actions de pied sont celles d'un formulaire.
La barre du haut (hb-topbar) reste celle de l'application : logo, rayon, recherche, notifications ; elle ne porte pas les actions de la page.