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 (31 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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 (15 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

Component List

Content Blocks
Draw attention to or bundle a section of content

Labels and Badges
Labels, tags, badges, counts, etc

Link Buttons
Links that look like buttons

List Groups
Displaying lists of links

Statistics
Highlighting numbers of things

Website Components
Buttons, alerts, forms, and various other page elements

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.