Alert
Example
7/30/2019 | 1:49 p.m.
Code
HTML
<section class="alert">
<div class="grid-xxl">
<img
class="icon"
src="/icons/alert-circle.svg"
alt="alert icon"
aria-hidden="true"
/>
<div class="information">
<div class="date-time">
<span class="date">7/30/2019</span> |
<span class="time">1:49 p.m.</span>
</div>
<div class="message">
<strong>Test System Message:</strong> This is a test system message and
will be removed shortly.
</div>
<div class="link"><a href="#link">More information »</a></div>
</div>
</div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
CSS
.alert {
background-color: #ffcb05;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
padding: 1rem 0;
}
.alert .grid-xxl {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.alert .information {
padding-left: 1rem;
}
.alert .information .date-time {
letter-spacing: 1.75px;
}
.alert .information .message {
margin-bottom: 1rem;
}
.alert .information .link a {
color: #00274c;
font-weight: 800;
-webkit-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.alert .information .link a:hover {
color: #1c5184;
}
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
32
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
32