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.

A site-wide alert
<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.

Page-level alerts
<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.

Was this page helpful?



Comments are helpful!
500 character limit

Feedback is anonymous.