Bandeau d'information importante - Notice
Le bandeau d’information importante permet aux utilisateurs de voir ou d’accéder à une information importante et temporaire.
Il est affiché sur l’ensemble des pages en desktop et en mobile. Il affiche une information importante et urgente (un usage trop fréquent risque de faire “disparaitre” ce bandeau).
Ce composant est disponible depuis la version 1.6
Nous sommes attentifs à vos retours afin de pouvoir apporter des corrections si nécessaire. Soyez vigilant quant à son utilisation en production !
Structure
Le composant comprend les éléments suivants :
- un fond $background-flat-info - obligatoire
- une icône information - obligatoire
- le message - obligatoire
- un lien au fil du texte - optionnel
- une icône croix de fermeture - optionnelle.
Titre du bandeau, lien au fil du texte
<div class="fr-notice fr-notice--info">
<div class="fr-container">
<div class="fr-notice__body">
<p class="fr-notice__title">
Titre du bandeau, <a href='#' rel='noopener external' title="intitulé - nouvelle fenêtre" target='_blank'>lien au fil du texte</a>
</p>
</div>
</div>
</div>
Avec une croix de fermeture
Label titre du bandeau d'information importante, avec un texte assez long, et un lien au fil du texte lorem ipsum dolor sit lorem ipsum dolor sit.
<div class="fr-notice fr-notice--info">
<div class="fr-container">
<div class="fr-notice__body">
<p class="fr-notice__title">Label titre du bandeau d'information importante, avec un texte assez long, et un <a href='#' rel='noopener external' title="intitulé - nouvelle fenêtre" target='_blank'>lien au fil du texte</a> lorem ipsum dolor sit lorem ipsum dolor sit.</p>
<button class="fr-btn--close fr-btn" title="Masquer le message" onclick="const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild(notice)">
Masquer le message
</button>
</div>
</div>
</div>
Règles d’utilisation
Usages
Le bandeau d’information importante doit être utilisé uniquement pour une information primordiale et temporaire. (Une utilisation excessive ou continue risque de “noyer” le composant).
Le bandeau doit être visible sur toutes les pages du site, quelque soit l’appareil utilisé.
Pour une information vitale comme une alerte enlèvement, il est possible d’utiliser une bannière spécifique.
Contenus
- Le bandeau doit être utilisé pour une information très importante ou urgente.
- Le message ne doit pas relayer une actualité “classique”.
- L’essentiel de l’information doit être contenu dans le bandeau. Il est cependant possible d’ajouter un lien pour compléter l’information.
Accessibilité
- Ne pas sauter ce composant via les liens d'évitement (le bandeau doit être lu quand l’utilisateur choisit “aller au contenu”)
Personnalisation
Le style de ce composant n’est pas personnalisable. Cependant, certains éléments sont facultatifs (voir la structure du composant
Besoin d'aide ?
L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :
- la communauté slack pour poser vos questions, et échanger avec d’autres utilisateurs.
Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant ! - le centre de support pour envoyer vos demandes de correctifs et d'évolution.