GOV
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
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
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>
Feedback is anonymous.
