Alerts

Guidance

Alerts should only be used when there is important or critical information that the user needs to be made aware of. Alerts should never be used to highlight featured content. To highlight featured content or a desired action, use callouts, or calls to action instead.

There are four alert styles:

1. Information: Used to alert the user of important information that may affect them.
2. Success: Used to alert the user that an action has been completed successfully.
3. Warning: Used to warn the user of a potential issue or problem that they need to be aware of.
4. Critical: Used to alert the user of a critical issue or problem that they need to be aware of.

There are three alert component types:

1. Inline alerts: Used to alert the user without disrupting workflow.
2. In-page alerts: Used when immediate attention is required for a specific page or section.
3. Global alerts: Used for system-wide alerts that impact all users and critical information related to public safety.

Inline alert

Inline alerts are used to alert the user of changes or important information in-context without disrupting workflow. For example, you can use an inline alert to draw attention to an application due date, or a critical requirement within an application.

Information

<div class="gnb-alert-info-inline" role="alert">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Success

<div class="gnb-alert-success-inline" role="alert">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Warning

<div class="gnb-alert-warning-inline" role="alert">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Critical

<div class="gnb-alert-critical-inline" role="alert">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

In-page alert

In-page alerts are used to alert the user of changes or important information in-context within page content. They can provide more context and instruction than inline alerts. For example, you can use an in-page alert to notify the user of an error, but also provide details on how to solve the problem.

Information

<div class="gnb-alert-info" role="alert">
	<h2>Information alert heading</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>

Success

<div class="gnb-alert-success" role="alert">
	<h2>Success alert heading</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>

Warning

<div class="gnb-alert-warning" role="alert">
	<h2>Warning alert heading</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>

Critical

<div class="gnb-alert-critical" role="alert">
	<h2>Critical alert heading</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>

Global alert

Global alerts are used to communicate critical information across all pages of a website or application. This alert component type is reserved for system-wide issues that impact all users, and critical information related to public safety. To remain effective, global alerts should very rarely be used, otherwise users may ignore them.

Global alert types and when to use them:

1. Information: Use to alert users of scheduled or unplanned system outages
2. Warning: Use to alert users of public safety issues that merit notifying citizens (like rising floodwater, or a wildfire)
3. Critical: Use to alert users of natural disasters or events that pose an immediate risk to public safety

Global alerts are full-width sections. The HTML code must be placed before <header>.

Information

<section class="gnb-alert-info-global">
	<div class="container-fluid">
		<p>MyHealthNB will be offline for scheduled maintenance on Saturday, April 22 2023</p>
	</div>
</section>

Warning

<section class="gnb-alert-warning-global">
	<div class="container-fluid">
		<p>Residents along the Saint John River should be vigilant as <a href="#">water continues to rise</a></p>
	</div>
</section>

Critical

<section class="gnb-alert-info-global">
	<div class="container-fluid">
		<p><a href="#">Evacuations ordered</a> along the Saint John River in Southwestern New Brunswick</p>
	</div>
</section>

Dismissible alerts

Any alert can be made dismissible by adding the class .gnb-dismissible-alert, and a dismiss button.

Dismissible inline alert

<div class="gnb-alert-info-inline gnb-dismissible-alert" role="alert">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<button class="gnb-dismiss-btn"><span class="sr-only">Dismiss</span><i class="fa-solid fa-xmark"></i></button>
</div>

Dismissible in-page alert

<div class="gnb-alert-info gnb-dismissible-alert" role="alert">
	<h2>Information alert heading</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>
	<button class="gnb-dismiss-btn"><span class="sr-only">Dismiss</span><i class="fa-solid fa-xmark"></i></button>
</div>

Dismissible global alert