1. Home
  2. Examples
  3. Spacing

Alert Banner

You can now add an alert banner at the top of your website for communicating important information which is meant to alert users. The Alert banner can be closed by the user using the x button in the top right corner.

Usage

Generally an Alert Banner will be added to your home page although it can be included on any page.
Add the <!--#include virtual="/v6.5/ssi/alert-banner.html" --> as the first item in your header.




<header role="banner" id="header" class="global-header">
<div id="skip-to-content"><a href="#main-content">Skip to Main Content</a></div>


<!-- Alert Banner -->
<!--#include virtual="/v6.5/ssi/alert-banner.html" -->
...
</header>

Other alerts and alert states

Alert Success

Well done! You successfully read this important alert message. Alert Success

Alert Warning

Warning! Better check yourself, you're not looking too good. Alert Warning

Alert Danger

Oh snap! Change a few things up and try submitting again. Alert Danger

Alert Severe

Alert Info