Bandeau
Bandeau horizontal : variante default (classe bj-notice seule), bj-notice--info, bj-notice--warning, bj-notice--alert. Icône optionnelle (<i class="bj-notice__icon …">), titre bj-notice__title dans bj-notice__body, contenu dans le corps, bouton bj-notice__close si fermable.
Variante par défaut
Sans modificateur : fond et bordure neutres ; ajoutez une icône ou un titre selon le contexte.
<div class="bj-notice" role="status">
<div class="bj-notice__body">
Message sur la variante par défaut (sans modificateur).
</div>
</div>Exemple avec icône
<div class="bj-notice" role="status">
<i class="bj-notice__icon ri-megaphone-line" aria-hidden="true"></i>
<div class="bj-notice__body">
Le guichet physique est fermé le vendredi après-midi.
</div>
</div>Titre dans le corps
Le titre est un <p class="bj-notice__title"> ; le reste du message suit dans le même bj-notice__body (équivalent du slot Vue).
Info —
Nouvelle version du portail disponible.<div class="bj-notice bj-notice--info" role="status">
<i class="bj-notice__icon ri-information-line bj-icon bj-icon--info" aria-hidden="true"></i>
<div class="bj-notice__body">
<p class="bj-notice__title">Info — </p>
Nouvelle version du portail disponible.
</div>
</div>Bandeau fermable
Ajoutez bj-notice__close avec un aria-label explicite sur n’importe quelle variante.
<div class="bj-notice bj-notice--info" role="status">
<div class="bj-notice__body">Bandeau fermable sur variante info.</div>
<button type="button" class="bj-notice__close" aria-label="Fermer le bandeau">
<i class="ri-close-line" aria-hidden="true"></i>
</button>
</div>Variantes sémantiques
<div class="bj-notice bj-notice--info" role="status">…</div>
<div class="bj-notice bj-notice--warning" role="status">…</div>
<div class="bj-notice bj-notice--alert" role="alert">…</div>Variante × fermeture
La combinaison bj-notice--alert et bouton fermer est courante pour les annonces critiques dismissibles.
Urgent —
Interruption ce soir de 22h à 2h.<div class="bj-notice bj-notice--alert" role="alert">
<i class="bj-notice__icon ri-error-warning-line bj-icon bj-icon--error" aria-hidden="true"></i>
<div class="bj-notice__body">
<p class="bj-notice__title">Urgent — </p>
Interruption ce soir de 22h à 2h.
</div>
<button type="button" class="bj-notice__close" aria-label="Fermer le bandeau">
<i class="ri-close-line" aria-hidden="true"></i>
</button>
</div>Toutes les variantes × fermeture
Par défaut, info, warning et alert peuvent tous recevoir bj-notice__close ; choisissez role="alert" pour les messages urgents.
<!-- Défaut + fermeture -->
<div class="bj-notice" role="status">
<div class="bj-notice__body">Message</div>
<button type="button" class="bj-notice__close" aria-label="Fermer">…</button>
</div>
<!-- Répéter avec bj-notice--info, bj-notice--warning, bj-notice--alert -->Icône × variante
Chaque variante peut inclure ou non une icône Remix cohérente avec le ton du message.
Classes CSS
| Classe | Description |
|---|---|
bj-notice | Bandeau flex ; style par défaut sans modificateur de variante. |
bj-notice__icon | Icône à gauche (<code><i></code>, classes Remix + <code>aria-hidden="true"</code>). |
bj-notice__body | Conteneur du titre optionnel et du contenu principal. |
bj-notice__title | Intitulé court ou préfixe en gras dans le corps. |
bj-notice__close | Bouton de fermeture à droite (aucune classe <code>bj-notice--closable</code> — le bouton suffit, comme pour l’alerte). |
bj-notice--info | Accent gauche information (bleu). |
bj-notice--warning | Accent avertissement. |
bj-notice--alert | Accent critique (erreur / urgence). |
Accessibilité
role="status" convient. Pour une urgence immédiate, role="alert" peut être approprié. Le bouton « fermer » exige un libellé explicite ; si le bandeau disparaît, évitez de piéger le focus.