Adding Alert HTML and CSS to your Application

There are three kinds of alerts you can add: informational, warning, and emergency. Each have a different color and icon.

The HTML for adding an alert should go at the top of your template, just after the skip-links div.

<div class="sitewide-alert sitewide-alert--warning">
  <div class="sitewide-alert__content">
    <p>' + EPA_alert_text + '</p>
  </div>
</div>

Change sitewide-alert--warning to sitewide-alert--info or sitewide-alert--emergency depending on the nature of the alert you wish to broadcast.

Be sure to include the /css/alert.css file to style the above HTML nicely.