Authentification — 5 modèles
Connexion et inscription, prévisualisés en direct dans la doc. Plusieurs modèles à copier — on applique les tokens (champs, boutons), pas les blocs marketing.
Connexion
Trois modèles selon le contexte : split de marque, carte compacte, ou intégré inline.
Modèle 1 — Split (panneau Ink + formulaire)
Modèle 2 — Carte centrée
Modèle 3 — Minimal (inline)
Wizard multi-étapes
Assistant en étapes séquentielles : barre de progression segmentée, navigation avant/arrière, validation à la dernière étape. Interactif ci-dessous — 100 % orbital.js, zéro dépendance.
Étape 1 sur 3
Vos identifiants
Étape 2 sur 3
Parlez-nous de vous
Pédagogie
Inclusion
Environnement
Étape 3 sur 3
Presque fini
Vérification par email
Un lien de confirmation sera envoyé.
| Hook | Rôle |
|---|---|
data-wizard | Conteneur de l'assistant (une .card en général). |
.wiz-bar > .seg | Barre de progression : un .seg par étape, rempli au fil de l'avancée. |
.wizard-step | Une étape. Seule l'étape courante est visible. |
[data-step-next] / [data-step-prev] | Boutons de navigation entre étapes. |
Inscription
Formulaire compact en une étape — pour les parcours courts. Pour un parcours long, préférer le wizard multi-étapes.
Composition & code
Briques : .auth-split/.auth-aside, .field, .check, .or-sep, .btn-block, et le wizard data-wizard + .wiz-bar + .wizard-step.
<!-- connexion split --> <div class="auth-split"> <aside class="auth-aside" data-accent="blue">… marque …</aside> <main class="auth-main"><form class="auth-form">…</form></main> </div> <!-- inscription wizard --> <div class="card" data-wizard> <div class="wiz-bar"><span class="seg"></span><span class="seg"></span><span class="seg"></span></div> <div class="wizard-step">… <button data-step-next>Continuer</button></div> </div>