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.
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]
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.
[Third 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.
Portfolio ministers
Provides access to the profiles of all portfolio ministers under the institution’s portfolio
[Organization head]
[Organization head]
[Organization head]
[Organization head]
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
- Date modified: