Notifications
Standard notification
Lorem ipsum dolor sit amet
<section class="notification">
<h2 class="notification__heading">Lorem ipsum dolor sit amet</h2>
<div class="notification__message">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada auctor
diam, quis <a href="#">convallis risus vehicula</a> ut. Praesent ac efficitur tortor.</p>
</div>
</section>
Inverted notification
Lorem ipsum dolor sit amet
<section class="notification notification--inverted">
<h2 class="notification__heading">...</h2>
<div class="notification__message">...</div>
</section>
Alert notification
The alert notification differs from the standard version in two ways. First by the addition of the `.notification--alert` class on the section element. The other being the `role="alert"` attribute also on the section element.
Lorem ipsum dolor sit amet
<section class="notification notification--alert" role="alert">
<h2 class="notification__heading">Lorem ipsum dolor sit amet</h2>
...
Warning notification
Lorem ipsum dolor sit amet
<section class="notification notification--warning">
<h2 class="notification__heading">Lorem ipsum dolor sit amet</h2>
...
Notifications with icon
Notifications can have an icon trailing the heading. To achieve this the `.notification--has-icon` class must be added to the `section` element. In addition the `.notification__heading--icon-bell` modifier class must be added to the headline element. Avalable icon modifier classes are: * `.notification__heading--icon-bell` * `.notification__heading--icon-location` * `.notification__heading--icon-calendar`
<section class="notification notification--alert notification--has-icon notification__icon--bell" role="alert">
<h2 class="notification__heading">Lorem ipsum dolor sit amet</h2>
<div class="notification__message"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada auctor diam, quis <a href="#">convallis risus vehicula</a> ut. Praesent ac efficitur tortor.</p></div>
</section>
Positive notification
The positive notification, like the alert notification, has the addition of a modifier class and a role attribute on the root element. For positves this class is `.notification--positive` and `role="alert"`.
Lorem ipsum
<div class="notification notification--positive" role="alert">
<h2 class="notification__heading">...</h2>
<div class="notification__message"><p>...</p></div>
</div>
Error notification
The error notification, like the alert notification, has the addition of a modifier class and a role attribute on the root element. For errors this class is `.notification--error` and `role="alert"`.
Lorem ipsum dolor sit amet:
- Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Mauris malesuada auctor diam
<div class="notification notification--error" role="alert">
<h2 class="notification__heading">Lorem ipsum dolor sit amet</h2>
<ul class="notification__list" aria-live="assertive" aria-relevant="additions removals">
<li class="notification__list-item">Lorem ipsum</li>
<li class="notification__list-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li class="notification__list-item">Mauris malesuada auctor diam</li>
</ul>
</div>
Small error notification
Lorem ipsum dolor sit amet
<section class="notification notification--error notification--small">
<div class="notification__message">
<p><span class="notification__heading">Lorem ipsum dolor sit amet</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada auctor
diam, quis <a href="#">convallis risus vehicula</a> ut. Praesent ac efficitur tortor.</p>
</div>
</section>