Alert development
Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.
Type
Data was updated
Some information was updated today. Please check carefully.
Data was updated
Some information was updated today. Please check carefully.
Data was updated
Some information was updated today. Please check carefully.
Data was updated
Some information was updated today. Please check carefully.
<div class="alert alert--info mb-3">
<div class="alert__body">
<div class="alert__title">Data was updated</div>
<div class="alert__text">Some information was updated today. Please check carefully.</div>
</div>
</div>
<div class="alert alert--success mb-3">
<div class="alert__body">
<div class="alert__title">Data was updated</div>
<div class="alert__text">Some information was updated today. Please check carefully.</div>
</div>
</div>
<div class="alert alert--warn mb-3">
<div class="alert__body">
<div class="alert__title">Data was updated</div>
<div class="alert__text">Some information was updated today. Please check carefully.</div>
</div>
</div>
<div class="alert alert--error mb-3">
<div class="alert__body">
<div class="alert__title">Data was updated</div>
<div class="alert__text">Some information was updated today. Please check carefully.</div>
</div>
</div>
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
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
← Quick Started Avatar →