Modèles & états

Ton prochain pasNouveau

Une seule action proposée en tête de page, avec son pourquoi en une phrase : « Ajoute ta première carte », « 3 tickets à vérifier ». Le langage de Gestion › Accueil, remonté dans Aubui pour tous les modules. CSS seulement. Premier usage : Wallet.

Essayer

Ton prochain pas

Ajoute ta première carte

Scanne le code-barres : Wallet la sort en caisse, en grand.

Scanner ma carte

Ton prochain pas

2 tickets à vérifier

La lecture n’était pas sûre : un coup d’œil et c’est rangé.

HTML

<section class="aub-card aub-pas aub-pas--warning" aria-labelledby="t-pas">
  <p class="aub-pas__quoi">Ton prochain pas</p>
  <div class="aub-pas__corps">
    <span class="aub-pas__emoji" aria-hidden="true">🧾</span>
    <div class="aub-pas__texte">
      <h2 id="t-pas">2 tickets à vérifier</h2>
      <p>La lecture n’était pas sûre : un coup d’œil et c’est rangé.</p>
      <a class="aub-btn aub-btn--primary" href="#a-verifier">Vérifier</a>
    </div>
  </div>
</section>

Classe	Rôle
`.aub-pas`	Sur une `.aub-card` : la barre de couleur à gauche (accent).
`--warning` · `--danger` · `--success`	Le ton : à vérifier, en retard / expiré, c’est fait.
`__quoi` · `__corps` · `__emoji` · `__texte`	L’étiquette « Ton prochain pas », la ligne emoji + texte.

Règle : un seul prochain pas par page (le plus utile), le reste va plus bas (« Et ensuite »). Pas de prochain pas quand il n’y a rien à faire.

Gestion a la même chose sous le nom .gs-pas (avant ce composant) : à remplacer par .aub-pas lors de sa prochaine retouche.