Contextual notifications for messages.
Use class .Notification for default notification.
The modifier classes are .Notification--error for errors, .Notification--success for success and .Notification--warning for warnings.
Wrap in div with class .Notification--toastFixed to fix at top of the page.
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.
<!-- Notification -->
<div class="Notification">
<p class="Notification-title">Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.<!-- <a href="#" class="link-underline">Link underline</a> --></p>
</div>
<!-- /Notification -->
<!-- Notification success -->
<div class="Notification Notification--success">
<p class="Notification-title">Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.</p>
</div>
<!-- /Notification success -->
<!-- Notification warning -->
<div class="Notification Notification--warning">
<p class="Notification-title">Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.</p>
</div>
<!-- /Notification warning -->
<!-- Notification error -->
<div class="Notification Notification--error">
<p class="Notification-title">Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget.</p>
</div>
<!-- /Notification error -->