GCWeb Alert examples

Alert with headings

Code

<section class="alert alert-danger">
	<h3>Danger alert</h3>
	<p>Alert details.</p>
</section>

<section class="alert alert-warning">
	<h3>Warning alert</h3>
	<p>Alert details.</p>
</section>

<section class="alert alert-success">
	<h3>Success alert</h3>
	<p>Alert details.</p>
</section>

<section class="alert alert-info">
	<h3>Info alert</h3>
	<p>Alert details.</p>
</section>

Links inside Alerts

Code

<section class="alert alert-success">
<h3>(Success Title)</h3>
<p> Success content goes here <a href="#" class="alert-link">link text</a>.</p>
</section>

<section class="alert alert-info">
<h3>(Info Title)</h3>
<p> Info content goes here <a href="#" class="alert-link">link text</a>.</p>
</section>

<section class="alert alert-warning">
<h3>(Warning Title)</h3>
<p> Warning content goes here <a href="#" class="alert-link">link text</a>.</p>
</section>

<section class="alert alert-danger">
<h3>(Danger Title)</h3>
<p> Danger content goes here <a href="#" class="alert-link">link text</a>.</p>
</section>

Alerts without Headings

Success alert

Info alert

Warning alert

Danger alert

Code

<h3> Success alert </h3>
<div class="alert alert-success">
	<p>(Success content here.)</p>
</div>

<h3> Info alert </h3>
<div class="alert alert-info">
	<p> Info content here. </p>
</div>

<h3> Warning alert </h3>
<div class="alert alert-warning">
	<p>(Warning content here.)</p>
</div>

<h3> Danger alert </h3>
<div class="alert alert-danger">
	<p>(Danger content here.)</p>
</div>

Alert with expand/collapse

Use an alert with expand/collapse when you need to show several alerts on the same page. Each alert only shows its heading until the user expands it, so stacked alerts take up less space.

Code

<section class="alert alert-warning">
	<details>
		<summary>
			<h3 class="h5">Beware of false information online</h3>
		</summary>
		<p>For accurate information, always check official Government of Canada and provincial or territorial websites.</p>
		<p>Check the <a href="#">latest scams alerts</a> related to benefits and taxes.</p>
	</details>
</section>

<section class="alert alert-info">
	<details>
		<summary>
			<h3 class="h5">Canada Groceries and Essentials Benefit</h3>
		</summary>
		<p>(Info content goes here.)</p>
	</details>
</section>

<section class="alert alert-success">
	<details>
		<summary>
			<h3 class="h5">Success alert</h3>
		</summary>
		<p>Alert details.</p>
	</details>
</section>

<section class="alert alert-danger">
	<details open>
		<summary>
			<h3 class="h5">Danger alert (expanded by default)</h3>
		</summary>
		<p>Alert details.</p>
	</details>
</section>