Notifications

Standard notification

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada auctor diam, quis convallis risus vehicula ut. Praesent ac efficitur tortor.

<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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada auctor diam, quis convallis risus vehicula ut. Praesent ac efficitur tortor.

<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.

<section class="notification notification--alert" role="alert">
    <h2 class="notification__heading">Lorem ipsum dolor sit amet</h2>
    ...

Warning notification

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada auctor diam, quis convallis risus vehicula ut. Praesent ac efficitur tortor.

<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"`.

<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"`.

<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 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris malesuada auctor diam, quis convallis risus vehicula ut. Praesent ac efficitur tortor. 

<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>