L'alerte permet d’attirer l’attention de l’utilisateur sur une information sans interrompre sa tâche.
DocumentationPréciser le type d'alerte (Information/Succès/Erreur) dans le titre ou, à défaut, dans le contenu de l'alerte
Le titre est défini par la classe "fr-alert__title", la balise <p> peut être remplacée par un niveau de titre hx suivant le contexte
Titre
Description
<div role="alert" class="fr-alert">
<p class="fr-alert__title">Titre</p>
<p>Description</p>
</div>
Information Covid
Description
<div role="alert" class="fr-alert fr-alert--info">
<p class="fr-alert__title">Information Covid</p>
<p>Description</p>
</div>
Succès de l'envoi
Description
<div role="alert" class="fr-alert fr-alert--success">
<p class="fr-alert__title">Succès de l'envoi</p>
<p>Description</p>
</div>
Erreur détectée dans le formulaire
Description
<div role="alert" class="fr-alert fr-alert--error">
<p class="fr-alert__title">Erreur détectée dans le formulaire</p>
<p>Description</p>
</div>
Attention
Description
<div role="alert" class="fr-alert fr-alert--warning">
<p class="fr-alert__title">Attention</p>
<p>Description</p>
</div>
Information Covid
Description
<div role="alert" class="fr-alert fr-alert--info">
<p class="fr-alert__title">Information Covid</p>
<p>Description</p>
<button class="fr-link--close fr-link" title="Masquer le message">Masquer le message</button>
</div>
Information Covid
Cliquer sur la croix pour fermer l'alerte
<div class="fr-collapse" id="alert-224">
<div role="alert" class="fr-alert fr-alert--info">
<p class="fr-alert__title">Information Covid</p>
<p>Cliquer sur la croix pour fermer l'alerte</p>
<button class="fr-link--close fr-link" title="Masquer le message" aria-expanded="true" aria-controls="alert-224">Masquer le message</button>
</div>
</div>
Information : titre de l'information
<div role="alert" class="fr-alert fr-alert--info fr-alert--sm">
<p>Information : titre de l'information</p>
</div>
Information : cliquer sur la croix pour fermer l'alerte
<div class="fr-collapse" id="alert-230">
<div role="alert" class="fr-alert fr-alert--info fr-alert--sm">
<p>Information : cliquer sur la croix pour fermer l'alerte</p>
<button class="fr-link--close fr-link" title="Masquer le message" aria-expanded="true" aria-controls="alert-230">Masquer le message</button>
</div>
</div>
Titre
Description
<div role="alert" class="fr-fi-lock-fill fr-alert">
<p class="fr-alert__title">Titre</p>
<p>Description</p>
</div>