Skip to main content
Experimental This website is used for testing – your feedback will help us to improve it.

Alert

Overview

Use the .bsk-alert class to highlight feedback about a user action, or some other event.

You must pick a variant for each alert, otherwise it will look strange. It is not enough to use .bsk-alert on its own.

You must pick a style for each alert, otherwise it will look strange. It is not enough to use .bsk-alert on its own.

Variants

There is no default alert variant, as a grey alert for example wouldn’t make a lot of sense.

Primary alert

<div class="bsk-alert bsk-alert-solid bsk-alert-primary" role="alert">
  Primary alert
</div>

Experimental alert

<div class="bsk-alert bsk-alert-solid bsk-alert-experimental" role="alert">
  Experimental alert
</div>

This variant is only intended for displaying a cookie notice as part of the standard header pattern.

Interactive cookie notices require the Alert and Cookie Notice JavaScript plugins, which are enabled on this site.

<div class="bsk-alert bsk-alert-solid bsk-alert-cookie-notice" role="alert">
This website uses cookies to help us make it better - <a href="#" class="bsk-alert-link">find out more</a>.
</div>

Contextual colours

The standard contextual colours can be used for context by adding these classes:

Standard Context Alert Contextual Class
Success .bsk-alert-success
Warning .bsk-alert-warning
Danger .bsk-alert-danger
Info .bsk-alert-info 
<div class="bsk-alert bsk-alert-solid bsk-alert-success" role="alert">Success alert</div>
<div class="bsk-alert bsk-alert-solid bsk-alert-warning" role="alert">Warning alert</div>
<div class="bsk-alert bsk-alert-solid bsk-alert-danger" role="alert">Danger alert</div>
<div class="bsk-alert bsk-alert-solid bsk-alert-info" role="alert">Info alert</div>

Experimental icon

The experimental standard conventional icon can be used for adding extra context to alerts.

Use the .bsk-alert-icon class to properly format an icon in an alert.

<div class="bsk-alert bsk-alert-solid bsk-alert-experimental" role="alert">
  <i class="fas fa-fw fa-flask bsk-alert-icon" aria-hidden="true"></i> Experimental alert
</div>

Contextual icons

The standard contextual icons can be used for adding extra context to alerts.

Use the .bsk-alert-icon class to properly format an icon in an alert.

<div class="bsk-alert bsk-alert-icon bsk-alert-solid bsk-alert-success" role="alert">
  <i class="far fa-fw fa-check bsk-alert-icon" aria-hidden="true"></i> Success alert
</div>
<div class="bsk-alert bsk-alert-icon bsk-alert-solid bsk-alert-warning" role="alert">
  <i class="far fa-fw fa-exclamation-triangle bsk-alert-icon" aria-hidden="true"></i> Warning alert
</div>
<div class="bsk-alert bsk-alert-icon bsk-alert-solid bsk-alert-danger" role="alert">
  <i class="fas fa-fw fa-exclamation-circle bsk-alert-icon" aria-hidden="true"></i> Danger alert
</div>
<div class="bsk-alert bsk-alert-icon bsk-alert-solid bsk-alert-info" role="alert">
  <i class="far fa-fw fa-info-square bsk-alert-icon" aria-hidden="true"></i> Info alert
</div>

Styles

Solid

<div class="bsk-alert bsk-alert-solid bsk-alert-success" role="alert">
  Solid (success) alert
</div>

Outline

<div class="bsk-alert bsk-alert-outline bsk-alert-success" role="alert">
  Outline (success) alert
</div>

Highlight

<div class="bsk-alert bsk-alert-highlight bsk-alert-success" role="alert">
  Highlight (success) alert
</div>

Components

Use the .bsk-alert-link class for any <a> elements within an alert.

<div class="bsk-alert bsk-alert-solid bsk-alert-success" role="alert">Alert with a <a href="#" class="bsk-alert-link">link</a></div>

Dismissible alerts

Add a <button> element using the close icon, to create an alert that can be closed or dismissed.

Dismissible alerts require the alert JavaScript plugin, which is enabled on this site.

The close button element should use a <button> element, not a <a> element, for browser compatibility.

<div class="bsk-alert bsk-alert-solid bsk-alert-success bsk-alert-dismissible" role="alert">
  <button type="button" class="bsk-close" data-dismiss="alert" aria-label="Close">&times;</button>
  A dismissible alert
</div>

Block alerts

Where an alert will contain more than just text, such as lists or buttons, etc. add the .bsk-alert-block class to ensure compatibility and correct formatting.

Using an alert with more than just text without this class is not supported and may not look right.

<div class="bsk-alert bsk-alert-block bsk-alert-solid bsk-alert-success" role="alert">
  <p>Longer success text - De carne animata corpora quaeritis. De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.</p>
  <ul>
    <li>the voodoo sacerdos flesh eater</li>
    <li>suscitat mortuos comedere carnem virus</li>
    <li>aenean a dolor plan et terror soulless vulnerum contagium accedunt</li>
    <li>mortui iam vivam unlife</li>
  </ul>
</div>

Block alert headings

A heading can be added to a block alert using a .bsk-alert-heading header and h4 heading.

The alert body should use the .bsk-alert-body class for proper formatting.

Other headings may be used, but are not supported and may not look right.

<div class="bsk-alert bsk-alert-block bsk-alert-solid bsk-alert-success" role="alert">
  <header class="bsk-alert-heading">
    <div class="bsk-h4">Success alert header</div>
  </header>
  <div class="bsk-alert-body">
    <p>Longer success text - De carne animata corpora quaeritis. De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.</p>
    <ul>
      <li>the voodoo sacerdos flesh eater</li>
      <li>suscitat mortuos comedere carnem virus</li>
      <li>aenean a dolor plan et terror soulless vulnerum contagium accedunt</li>
      <li>mortui iam vivam unlife</li>
    </ul>
  </div>
</div>

This example uses header classes instead of elements to avoid issues with the automatic table of contents.

Sizes

Add one of these classes to alter the size of an alert:

Alert Size Alert Size Class
Large .bsk-alert-lg 
<div class="bsk-alert bsk-alert-lg bsk-alert-solid bsk-alert-success" role="alert">
  Large (success) alert
</div>
<div class="bsk-alert bsk-alert-solid bsk-alert-success" role="alert">
  Regular (success) alert
</div>

Layouts

Static top

Add the .bsk-alert-static-top class and include a container to create a full-width alert that scrolls with the page.

<div class="bsk-alert bsk-alert-static-top bsk-alert-solid bsk-alert-success" role="alert">
  Alert static top
</div>