Retour

Alerte (alert)

L'alerte permet d’attirer l’attention de l’utilisateur sur une information sans interrompre sa tâche.

Documentation

Alerte statique

Précisez 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 "village-alert__title", la balise <p> peut être remplacée par un niveau de titre hx suivant le contexte.

Alerte par défaut

Titre

Description

<div id="alert-1179" class="village-alert">
    <h3 class="village-alert__title">Titre</h3>
    <p>Description</p>
</div>

Alerte succès

Succès de l'envoi

Description

<div id="alert-1181" class="village-alert village-alert--success">
    <h3 class="village-alert__title">Succès de l&#39;envoi</h3>
    <p>Description</p>
</div>

Alerte erreur

Erreur détectée dans le formulaire

Description

<div id="alert-1183" class="village-alert village-alert--error">
    <h3 class="village-alert__title">Erreur détectée dans le formulaire</h3>
    <p>Description</p>
</div>

Alerte info

Information Covid

Description

<div id="alert-1185" class="village-alert village-alert--info">
    <h3 class="village-alert__title">Information Covid</h3>
    <p>Description</p>
</div>

Alerte attention

Attention

Description

<div id="alert-1187" class="village-alert village-alert--warning">
    <h3 class="village-alert__title">Attention</h3>
    <p>Description</p>
</div>

Alerte sans titre

Information : titre de l'information

<div id="alert-1189" class="village-alert village-alert--info">
    <p>Information : titre de l&#39;information</p>
</div>

Alerte avec bouton fermer

Information Covid

Cliquer sur la croix pour fermer l'alerte

<div id="alert-1193" class="village-alert village-alert--info">
    <h3 class="village-alert__title">Information Covid</h3>
    <p>Cliquer sur la croix pour fermer l&#39;alerte</p>
    <button class="village-btn--close village-btn" title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)" id="button-1194">
        Masquer le message
    </button>
</div>

Alerte taille SM

Titre

Description

<div id="alert-1196" class="village-alert village-alert--info village-alert--sm">
    <h3 class="village-alert__title">Titre</h3>
    <p>Description</p>
</div>

Alerte taille SM sans titre

Information : titre de l'information

<div id="alert-1198" class="village-alert village-alert--info village-alert--sm">
    <p>Information : titre de l&#39;information</p>
</div>

Alerte taille SM refermable

Information : cliquer sur la croix pour fermer l'alerte

<div id="alert-1202" class="village-alert village-alert--info village-alert--sm">
    <p>Information : cliquer sur la croix pour fermer l&#39;alerte</p>
    <button class="village-btn--close village-btn" title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)" id="button-1203">
        Masquer le message
    </button>
</div>

Alerte icône personnalisée

Titre

Description

<div id="alert-1205" class="village-icon-lock-fill village-alert village-alert">
    <h3 class="village-alert__title">Titre</h3>
    <p>Description</p>
</div>

Alerte dynamique

Ajouter l'attribut role="alert" lorsque les alertes sont ajoutées dynamiquement dans le DOM (en js après le chargement de la page)

Alerte ajoutée dynamiquement (type)

<div id="alert-1209" role="alert" class="village-alert village-alert--error">
    <h3 class="village-alert__title">Erreur détectée dans le formulaire</h3>
    <p>Cliquer sur la croix pour fermer l&#39;alerte</p>
    <button class="village-btn--close village-btn" title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)" id="button-1210">
        Masquer le message
    </button>
</div>

Dépréciation

Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes

Alerte avec bouton fermer

Information Covid

Cliquer sur la croix pour fermer l'alerte

<div class="village-alert village-alert--info">
    <p class="village-alert__title">Information Covid</p>
    <p>Cliquer sur la croix pour fermer l&#39;alerte</p>
    <button class="village-link--close village-link" title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)" id="link-1215">Masquer le message</button>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.