Alerts
Alerts, announcements, updates, information
Site-Wide Alerts and Announcements
These display site-wide and are dismissable. They are only used between the header and the breadcrumbs, and only for something that we think everyone needs to see. You have the option of using a separate desktop and mobile title and link text.
<div class="full-row full-row-alert"> <div class="container"> <div class="alert-container" id="alert01234" data-alert-id="01234"> <span class="alert-label"> <span class="glyphicons glyphicons-snowflake"></span> <span class="desktop-alert-label"> Snow: </span> <span class="mobile-alert-label"> Snow: </span> </span> <a href="#"> <span class="desktop-alert-link-text"> Snow storm expected between 10am and 8pm, expect 4-6 inches </span> <span class="mobile-alert-link-text"> Snow storm expected between 10am and 8pm, expect 4-6 inches </span> </a> <a href="#" class="alert-close"> <span class="sr-only"> Close this alert </span> <span class="glyphicons glyphicons-remove-2"></span> </a> </div> </div> </div>
Page-Level Alerts
Includes error, alert, success, and instructional messages. They consist of a div with one or more paragraphs. Usually there is bold text at the top or beginning.
Error: Your request failed to be submitted.
Alert: This application is down for maintenance from 12pm to 3pm.
Success: Your request was successfully submitted.
<div class="error"> <p> <strong>Error:</strong> Your request failed to be submitted. </p> </div> <div class="alert"> <p> <strong>Alert:</strong> This application is down for maintenance from 12pm to 3pm. </p> </div> <div class="success"> <p> <strong>Success:</strong> Your request was successfully submitted. </p> </div>
Help Us Improve This Page
Did you notice an error? Is there information that you expected to find on this page, but didn't? Let us know below, and we'll work on it.
Feedback is anonymous.