Alertes

Conseils

Les alertes sont uniquement utilisées lorsque des informations importantes ou essentielles doivent être portées à la connaissance de l’utilisateur. Les alertes ne doivent jamais être utilisées pour attirer l’attention sur un contenu particulier ou une mesure à prendre. Dans de tels cas, utilisez plutôt des encadrés ou des appels à l'action.

Il existe quatre styles d’alertes :

1. Information : Utilisée pour avertir l’utilisateur d’informations importantes qui pourraient le concerner.
2. Succès : Utilisée pour informer l’utilisateur qu’une action a été réalisée avec succès.
3. Avertissement : Utilisée pour avertir l’utilisateur d’un problème potentiel ou d’une situation dont il doit tenir compte.
4. Critique : Utilisée pour avertir l’utilisateur d’une situation ou d’un problème important dont il doit tenir compte.

Il existe trois types de composants d’alerte :

1. Alertes intralignes : Utilisées pour alerter l’utilisateur sans interrompre le flux de travail.
2. Alertes sur la page : Utilisées lorsque l’attention immédiate de l’utilisateur est requise sur une page ou dans une section précise.
3. Alertes globales : Utilisées pour les alertes à l’échelle du système qui affectent tous les utilisateurs et qui sont liées à la sécurité publique.

Alerte intraligne

Les alertes intralignes servent à avertir l’utilisateur de changements ou à lui communiquer des informations importantes au moment opportun, sans perturber le flux de travail. Par exemple, vous pouvez utiliser une alerte intraligne pour attirer l’attention de l’utilisateur sur une date limite ou une exigence essentielle dans une demande.

Information

<div class="gnb-alert-info-inline" role="alert">
	<p>Vous devez postuler d’ici le 30 septembre 2023.</p>
</div>

Succès

<div class="gnb-alert-success-inline" role="alert">
	<p>Votre candidature a été reçue avec succès.</p>
</div>

Avertissement

<div class="gnb-alert-warning-inline" role="alert">
	<p>Votre licence est sur le point d'expirer.</p>
</div>

Critique

<div class="gnb-alert-critical-inline" role="alert">
	<p>Votre licence a expiré.</p>
</div>

Alerte sur la page

Les alertes sur la page servent à avertir l’utilisateur de changements ou lui communiquer des informations importantes en lien avec le contenu de la page. Elles peuvent fournir plus de contexte et d’instructions que les alertes intralignes. Par exemple, vous pouvez utiliser une alerte sur la page pour avertir l’utilisateur d’une erreur et lui fournir des instructions détaillées sur la manière de résoudre le problème.

Information

<div class="gnb-alert-info" role="alert">
	<h2>Titre de l'alerte d'information</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem. Nulla scelerisque orci nulla, quis ultrices lectus mollis et.</p>
</div>

Succès

<div class="gnb-alert-success" role="alert">
	<h2>Titre de l'alerte de succès</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem. Nulla scelerisque orci nulla, quis ultrices lectus mollis et.</p>
</div>

Avertissement

<div class="gnb-alert-warning" role="alert">
	<h2>Titre de l'alerte d'avertissement</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem. Nulla scelerisque orci nulla, quis ultrices lectus mollis et.</p>
</div>

Critique

<div class="gnb-alert-critical" role="alert">
	<h2>Titre de l'alerte critique</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem. Nulla scelerisque orci nulla, quis ultrices lectus mollis et.</p>
</div>

Alerte globale

Les alertes globales servent à communiquer des renseignements essentiels à travers toutes les pages d’un site Web ou d’une application. Ce type de composant d’alerte est réservé aux problèmes qui affectent l’ensemble du système et qui sont liés à la sécurité publique. Les alertes globales doivent être utilisées avec réserve pour rester efficaces, faute de quoi les utilisateurs risquent de les ignorer..

Les types d’alertes globales et les situations où les utiliser :

1. Information : Utilisez cette alerte pour aviser les utilisateurs d’une interruption planifiée ou imprévue du système.
2. Avertissement : Utilisez cette alerte pour aviser les utilisateurs de problèmes de sécurité publique qui méritent d’être signalés aux citoyens (comme une crue ou un feu de forêt).
3. Critique : Utilisez cette alerte pour aviser les utilisateurs d’une catastrophe naturelle ou d’un événement qui pose un risque immédiat pour la sécurité publique.

Les alertes globales s’affichent en pleine largeur. Insérez le code HTML avant l’élément <header>.

Information

<section class="gnb-alert-info-global">
    <div class="container-fluid">
        <p>MyHealthNB sera hors ligne pour une maintenance planifiée le samedi 22 avril 2023</p>
    </div>
</section>

Avertissement

<section class="gnb-alert-warning-global">
    <div class="container-fluid">
        <p>Les résidents le long de la rivière Saint-Jean doivent demeurer vigilants en raison de l’augmentation des  <a href="#">niveaux d’eau.</a></p>
    </div>
</section>

Critique