Notification
Example
Update available
Success
Warning
Unexpected behavior
<div class="notification">
<div class="notification__icon">
<svg width="20" height="20" viewBox="0 0 20 20">
<use xlink:href="#some-icon"></use>
</svg>
</div>
<div class="notification__content">
<div class="notification__title">Update available</div>
<div class="notification__message">New content available, please refresh your page.</div>
</div>
<div class="notification__close">
<button class="button button--size-1 button--subtle">
<svg width="16" height="16">
<use xlink:href="#cross-icon"></use>
</svg>
</button>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Container
Put your notifications inside <div class="notification-container">...</div> container to place them on the page.
<!--top left-->
<div class="notification-container notification-container--top-left">
<!--your notification here-->
</div>
<!--top right-->
<div class="notification-container notification-container--top-right">
<!--your notification here-->
</div>
<!--bottom left-->
<div class="notification-container notification-container--bottom-left">
<!--your notification here-->
</div>
<!--bottom right-->
<div class="notification-container notification-container--bottom-right">
<!--your notification here-->
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16