Components page

Generic destination pages share many characteristics. For example, they are often long-form documents requiring structure to facilitate usability and readability. In many cases, they include images, charts, graphs or tables. Following are patterns aimed at increasing the usability and consistency of destination pages of various types.

Download link

Download links are used for referencing and linking to non-HTML files on Canada.ca web pages.

In-page table of contents

The In-Page Table of Contents Pattern is a list of links that lead to subsections of the same page. This pattern is intended for long documents that exist as a single page.

[First section heading]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam delectus iusto repellat assumenda nobis, modi accusamus, rerum praesentium ad dignissimos ipsam? Facilis repellat, quibusdam qui? Et dolore ipsa ut repellendus.

[Second section heading]

[Third section heading]

Alert designs

Danger alert

Optional alert details.

Warning alert

Optional alert details.

Success alert

Optional alert details.

Info alert

Optional alert details.

Code

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

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

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

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

Page details

Report a problem on this page

Date modified:: 2021-09-28