Alerts

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to provide contextual feedback messages for typical user actions. Choose from a handful of available and flexible alert messages.

Design and coding

Basic use

Use to wrap any text and an optional dismiss button in .alert, or one of the four contextual classes (for example, .alert-success) for basic alert messages.

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so always specify a type with a contextual class. Choose from success, info, warning, or danger.

Success alert

Use this alert to call attention to information that needs to stand out from the rest of the page content. With the Success alert, the title appears next to a a checkmark icon; the content background is green.

Appearance

Alert with a heading

(Title)

(Success content here.)

Alert without a heading

(Regular content here.)

(Success content here.)

Correct use

Compliance point(s):

Use .alert-success to acknowledge something positive for example, a completed task, something that is correct
Place in the logical flow of a page
Ensure it relates to the content immediately around it
Begin <section> with a heading that is specific to the featured content, and containded within it
Use a general heading only if a specific heading is not possible (for example, "Congratulations")

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use <section> within another section, or validation issues occur
- Use <div> to style the alert

Code

// Alert with a heading
<section class="alert alert-success">
  <h*>...</h*>
  ...
</section>

// Alert without a heading
<div class="alert alert-success">
   <p>...</p>
</div>

Info alert

Use to highlight targeted information for specific segment groups.With the Info alert, the title appears next to a letter "i" icon; the content background is blue. Use this alert to call attention to feature-worthy information that needs to stand out from the rest of the page content.

Appearance

Alert with a heading

(Title)

(Info content here.)

Alert without a heading

(Regular content here.)

(Info content here.)

Correct use

Compliance point(s):

Use .alert-info to highlight fairly important information
Place in the logical flow of a page
Ensure it relates to the content immediately around it
Begin <section> with a heading that is specific to the featured content, and containded within it
Use a general heading only if a specific heading is not possible (for example, "Tip", "Summary", "Note")

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use <section> within another section, or validation issues occur
- Use <div> to style the alert

Code

// Alert with a heading
<section class="alert alert-info">
  <h*>...</h*>
  ...
</section>

// Alert without a heading
<div class="alert alert-info">
   <p>...</p>
</div>

Warning alert

Use this alert to call attention to information that needs to stand out from the rest of the page content. With the Warning alert, the title appears next to a caution icon; the content background is yellow.

Appearance

Alert with a heading

(Title)

(Warning content here.)

Alert without a heading

(Regular content here.)

(Warning content here.)

Correct use

Compliance point(s):

Use .alert-warning to warn the user
Place in the logical flow of a page
Ensure it relates to the content immediately around it
Begin <section> with a heading that is specific to the featured content, and containded within it
Use a general heading only if a specific heading is not possible (for example, "Warning", "Alert")

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use <section> within another section, or validation issues occur
- Use <div> to style the alert

Code

// Alert with a heading
<section class="alert alert-warning">
  <h*>...</h*>
  ...
</section>

// Alert without a heading
<div class="alert alert-warning">
   <p>...</p>
</div>

Danger alert

Use this alert to call attention to information that needs to stand out from the rest of the page content. With the Danger alert, the title appears next to an exclamation icon; the content background is red.

Appearance

Alert with a heading

(Title)

(Danger content here.)

Alert without a heading

(Regular content here.)

(Danger content here.)

Correct use

Compliance point(s):

Use .alert-danger for very important, negative or dangerous, information/actions for example, systems that are down, pending changes to X, "Are you sure you want to delete X?"
Place in the logical flow of a page
Ensure it relates to the content immediately around it
Begin <section> with a heading that is specific to the featured content, and containded within it
Use a general heading only if a specific heading is not possible (for example, "Important warning", "Attention")

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use <section> within another section, or validation issues occur
- Use <div> to style the alert

Code

// Alert with a heading
<section class="alert alert-danger">
  <h*>...</h*>
  ...
</section>

// Alert without a heading
<div class="alert alert-danger">
    <p>...</p>
</div>

Enhanced use

Alert links

Use to override the default appearance of a link, use the .alert-link utility class to quickly provide matching colored links within any alert.

Appearance

(Title)

(Success content goes here link text.)

(Title)

(Info content goes here link text.)

(Title)

(Warning content goes here link text.)

(Title)

(Danger content goes here link text.)

Code

<section class="alert alert-success">
  <p>... <a href="#" class="alert-link">link text</a>.</p>
</section>

<section class="alert alert-info">
  <p>... <a href="#" class="alert-link">link text</a>.</p>
</section>

<section class="alert alert-warning">
 <p>... <a href="#" class="alert-link">link text</a>.</p>
</section>

<section class="alert alert-danger">
  <p>... <a href="#" class="alert-link">link text</a>.</p>
</section>

Add-on features

Additional add-on features and behaviours are available.

Equalize (Equal height)

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified:: 2019-04-11