Default
The default notifications are used on a white background and have 4 different versions depending on the severity of the message.
All notifications can be used with or without icons, if needed some extra information can be added to clarify the notification.
Example
Quick tip
Good news
Warning! You could do it, but I wouldn’t recommend it.
Some extra information about the notification.
Bad news
Updates available
Refresh the app to use the updated version.
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
33
34
35
36
<div class="ox-notification">
<span class="ox-notification__icon ox-icon ox-icon--lightbulb"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Quick tip</h4>
</div>
</div>
<div class="ox-notification ox-notification--success">
<span class="ox-notification__icon ox-icon ox-icon--thumb-up"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Good news</h4>
</div>
</div>
<div class="ox-notification ox-notification--warning">
<span class="ox-notification__icon ox-icon ox-icon--danger"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Warning! You could do it, but I wouldn’t recommend it.</h4>
<p class="ox-notification__info">Some extra information about the notification.</p>
</div>
</div>
<div class="ox-notification ox-notification--error">
<span class="ox-notification__icon ox-icon ox-icon--error"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Bad news</h4>
</div>
</div>
<div class="ox-notification ox-notification--update">
<span class="ox-notification__icon ox-icon ox-icon--refresh"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Updates available</h4>
<p class="ox-notification__info">Refresh the app to use the updated version.</p>
</div>
</div>
With actions
If you've got some actions linked to your notification, you can add some buttons in a ox-notification__actions wrapper.
Example
Warning! You could do it, but I wouldn’t recommend it.
Some extra information about the notification.
Bad news
Updates available
Refresh the app to use the updated version.
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
33
34
<div class="ox-notification ox-notification--warning">
<span class="ox-notification__icon ox-icon ox-icon--danger"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Warning! You could do it, but I wouldn’t recommend it.</h4>
<p class="ox-notification__info">Some extra information about the notification.</p>
</div>
<div class="ox-notification__actions">
<button class="ox-notification__actions__button ox-button ox-button--plain ox-button--small">More info</button>
<button class="ox-notification__actions__button ox-button ox-button--ghost ox-button--small">Retry</button>
</div>
</div>
<div class="ox-notification ox-notification--error">
<span class="ox-notification__icon ox-icon ox-icon--error"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Bad news</h4>
</div>
<div class="ox-notification__actions">
<button class="ox-notification__actions__button ox-button ox-button--plain ox-button--small">More info</button>
<button class="ox-notification__actions__button ox-button ox-button--ghost ox-button--small">Retry</button>
</div>
</div>
<div class="ox-notification ox-notification--update">
<span class="ox-notification__icon ox-icon ox-icon--refresh"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Updates available</h4>
<p class="ox-notification__info">Refresh the app to use the updated version.</p>
</div>
<div class="ox-notification__actions">
<button class="ox-notification__actions__button ox-button ox-button--plain ox-button--small">More info</button>
<button class="ox-notification__actions__button ox-button ox-button--ghost ox-button--small">Refresh</button>
</div>
</div>
With border
Add the modifier ox-notification--has-border to add a border to the notification. These kinds of messages are used on the default light grey background.
If needed, you can add the wrapper ox-notification-wrapper around the notification(s). Please take notice that the notification will only stick to the top of the page after scrolling past it, so it's best to position the sticky notifications at the TOP of the page, directly under the title.
Example
Quick tip
Good news
Warning! You could do it, but I wouldn’t recommend it.
Some extra information about the notification.
Bad news
Updates available
Refresh the app to use the updated version.
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
33
34
35
36
<div class="ox-notification ox-notification--has-border">
<span class="ox-notification__icon ox-icon ox-icon--lightbulb"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Quick tip</h4>
</div>
</div>
<div class="ox-notification ox-notification--success ox-notification--has-border">
<span class="ox-notification__icon ox-icon ox-icon--thumb-up"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Good news</h4>
</div>
</div>
<div class="ox-notification ox-notification--warning ox-notification--has-border">
<span class="ox-notification__icon ox-icon ox-icon--danger"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Warning! You could do it, but I wouldn’t recommend it.</h4>
<p class="ox-notification__info">Some extra information about the notification.</p>
</div>
</div>
<div class="ox-notification ox-notification--error ox-notification--has-border">
<span class="ox-notification__icon ox-icon ox-icon--error"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Bad news</h4>
</div>
</div>
<div class="ox-notification ox-notification--update ox-notification--has-border">
<span class="ox-notification__icon ox-icon ox-icon--refresh"></span>
<div class="ox-notification__content">
<h4 class="ox-notification__title">Updates available</h4>
<p class="ox-notification__info">Refresh the app to use the updated version.</p>
</div>
</div>