Content elements

Alert Box

This is a warning message that allows us to draw the user’s attention to something of high importance or as a warning.

Open this alert box example in a new tab
HTML
<div class="occlss-alert-box">
  <span class="occlss-alert-box__icon" aria-hidden="true">!</span>
  <span class="occlss-alert-box__text">
    <span class="occlss-alert-box__assistive">Warning</span>
    It is the responsibility of the driver to check when restrictions operate and park legally.
  </span>
</div>

When to use this component

It should only be used where failure to comply with the warning could lead to a fine, danger to the user, or where something is temporarily closed. For example, where the customer might get a parking ticket or a library is closed due to a burst pipe.

The content is in a regular weight but bold text can be used if kept to a minimum.

When not to use this component

There should only be one alert box on a page.

Changelog

1.0.0

  • Component added