Bandeau d’information importante (Notice)

Utilisez un bandeau d’information importante pour signaler un message global en haut d’une page ou d’un parcours.

attention

Ce composant nécessite une licence Pro valide en production.

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:notice

Usage

• Le composant doit rester court.
• Utilisez un lien seulement s’il apporte une action utile.

Modes d'utilisation

Exemple principal

Bandeau d’information importante · exemple principal

<twig:dsfr:notice
  title="Maintenance prévue ce soir de 20 h à 22 h"
  type="info"
  linkLabel="Consulter le détail"
  linkHref="/maintenance"
/>

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:notice
  id="bandeau-information-importante-example"
  class="fr-mt-2w"
  data-controller="bandeau-information-importante"
/>

API publique

Composant	Rôle
dsfr:notice	Composant principal de cette page.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
title	string	Requis ou défaut selon composant	Titre visible du composant.
type	enum	info	info, warning, alert, weather-orange, weather-red, weather-purple, kidnapping, cyberattack, attack, witness
desc	string	""	Description courte du bandeau.
linkHref	string	""	URL du lien d’action.
linkLabel	string	""	Libellé du lien d’action.
dismissible	bool	false	Affiche le bouton de fermeture DSFR.

Guide d'intégration

Question	Réponse
Famille DSFR	Feedback
Quand l'utiliser	Quand l’interface doit qualifier un état, attirer l’attention ou confirmer une action.
Quand éviter	Pour structurer une page complète : gardez ces composants ponctuels et proches du contenu concerné.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:notice.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Bandeau d’information importante : options, accessibilité et rendu DSFR

Variantes de bandeau d’information importante

• types métier via type pour adapter le sens visuel et sémantique.

Points de contrôle propres à ce composant

• Le composant doit rester court.
• Utilisez un lien seulement s’il apporte une action utile.

Accessibilité feedback

• Le message doit être autonome et compréhensible sans couleur seule.
• Utilisez alertRole seulement pour les messages ajoutés dynamiquement qui doivent être annoncés immédiatement.
• Gardez les libellés courts et actionnables.

Intégration Symfony/Twig pour dsfr:notice

• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:notice quand ils concernent son nœud racine.

Checklist de recette

• message compréhensible sans icône
• contraste en thème clair et sombre
• comportement de fermeture si dismissible
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.
Le composant rend en local mais pas en production	Vérifiez la licence avec php bin/console dsfr:license:validate.