A neat way of displaying extended notification-style content to users.
Welcome New! ×
Please enter your details below.
Error! ×
There was an error processing your credit card details. Instead, please send 4 Bitcoins to XXX.
Warning! ×
Please make sure that you enter the correct credit card details.
Success! ×
Thanks! You entered the correct credit card details, and your payment has been confirmed.
More text! ×
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et ipsum justo. Donec sagittis augue velit, at feugiat magna gravida eu. Morbi accumsan neque sagittis lectus posuere viverra. Praesent laoreet hendrerit velit, ut dignissim neque. Donec neque risus, imperdiet at odio eu, venenatis tempus nisi. Pellentesque vitae lorem massa. Nunc vitae pellentesque nulla. Morbi at pulvinar orci, tincidunt hendrerit magna. Curabitur id felis non quam viverra porttitor in at sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nullam scelerisque eget dolor in rutrum. Curabitur quis pharetra enim. Duis arcu risus, porta in nunc et, venenatis dapibus tellus. Morbi cursus bibendum leo eu laoreet. Vivamus feugiat blandit tortor, sit amet rutrum felis gravida a. Quisque vel sagittis felis. Aliquam blandit commodo mauris in egestas. Duis molestie, diam in varius iaculis, mi lorem dapibus dui, at scelerisque mi nibh eget dolor. Pellentesque non mattis felis.
Snippet uses FontAwesome icons.
<div class="notification light">
<div class="title">Welcome! <span class="close">×</span></div>
<div class="body">Please enter your details below.</div>
</div>
<div class="notification red">
<div class="title"><i class="fas fa-exclamation-circle"></i> Error! <span class="close">×</span></div>
<div class="body">There was an error processing your credit card details. Instead, please send 4 Bitcoins to XXX.</div>
</div>
<div class="notification yellow">
<div class="title"><i class="fas fa-exclamation-triangle"></i> Warning! <span class="close">×</span></div>
<div class="body">Please make sure that you enter the correct credit card details.</div>
</div>
<div class="notification green">
<div class="title"><i class="fas fa-exclamation-triangle"></i> Success! <span class="close">×</span></div>
<div class="body">Thanks! You entered the correct credit card details, and your payment has been confirmed.</div>
</div>
<div class="notification blue">
<div class="title"><i class="fas fa-info-circle"></i> More text! <span class="close">×</span></div>
<div class="body">
Lorem ipsum dolor sit amet...
<hr class="separator">
Nullam scelerisque eget dolor in rutrum...
</div>
</div>
Dismissing notifications JS
To dismiss notifications, you will need to use a little JavaScript. Firstly, add the class dismissable to the notification:
<div class="notification default dismissable">
<div class="title"><i class="fas fa-exclamation-triangle"></i> Warning! <span class="close">×</span></div>
<div class="body">You can dismiss me.</div>
</div>
Next, add some JS that adds the class dismissed and sets the style.display property to none after 300ms.
Warning! ×
You can dismiss me.
<div class="notification default dismissable" id="dismiss">
<div class="title"><i class="fas fa-exclamation-triangle"></i> Warning! <span class="close" onClick="var e = document.getElementById('dismiss'); e.classList.add('dismissed'); window.setTimeout(function(){e.style.display = 'none';},300);">×</span></div>
<div class="body">You can dismiss me.</div>
</div>
Grouping notifications
Notifications can also be grouped if several similar ones are present:
Notification ×
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor lorem, tempus sit amet odio sed, faucibus auctor dolor. Phasellus a tincidunt orci. Nulla ut erat a orci scelerisque lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed odio nibh, gravida nec posuere sit amet, elementum id est. Proin cursus massa vel porta ullamcorper. Pellentesque placerat velit vel sagittis eleifend.
Notification ×
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor lorem, tempus sit amet odio sed, faucibus auctor dolor. Phasellus a tincidunt orci. Nulla ut erat a orci scelerisque lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed odio nibh, gravida nec posuere sit amet, elementum id est. Proin cursus massa vel porta ullamcorper. Pellentesque placerat velit vel sagittis eleifend.
Notification ×
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor lorem, tempus sit amet odio sed, faucibus auctor dolor. Phasellus a tincidunt orci. Nulla ut erat a orci scelerisque lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed odio nibh, gravida nec posuere sit amet, elementum id est. Proin cursus massa vel porta ullamcorper. Pellentesque placerat velit vel sagittis eleifend.
<div class="notification-group">
<div class="notification blue">
<div class="title">Notification <span class="close">×</span></div>
<div class="body">Lorem ipsum dolor sit amet...</div>
</div>
<div class="notification blue">
<div class="title">Notification <span class="close">×</span></div>
<div class="body">Lorem ipsum dolor sit amet...</div>
</div>
<div class="notification blue">
<div class="title">Notification <span class="close">×</span></div>
<div class="body">Lorem ipsum dolor sit amet...</div>
</div>
</div>
Grouping titles
Within groups of notifications, you can have one title for the entire group, rather than individual titles for each notification:
Notification ×
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor lorem, tempus sit amet odio sed, faucibus auctor dolor. Phasellus a tincidunt orci. Nulla ut erat a orci scelerisque lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed odio nibh, gravida nec posuere sit amet, elementum id est. Proin cursus massa vel porta ullamcorper. Pellentesque placerat velit vel sagittis eleifend.
Notification ×
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor lorem, tempus sit amet odio sed, faucibus auctor dolor. Phasellus a tincidunt orci. Nulla ut erat a orci scelerisque lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed odio nibh, gravida nec posuere sit amet, elementum id est. Proin cursus massa vel porta ullamcorper. Pellentesque placerat velit vel sagittis eleifend.
Notification ×
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor lorem, tempus sit amet odio sed, faucibus auctor dolor. Phasellus a tincidunt orci. Nulla ut erat a orci scelerisque lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed odio nibh, gravida nec posuere sit amet, elementum id est. Proin cursus massa vel porta ullamcorper. Pellentesque placerat velit vel sagittis eleifend.
To do this, simply add the group-titles class to the notification-group div.
Grouped-title notification groups cannot be 'dismissed' as shown for indivdual notifications above.
Notifications in columns
As demonstrated below, notifications work perfectly in columns, too:
Notification ×
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor lorem, tempus sit amet odio sed, faucibus auctor dolor. Phasellus a tincidunt orci. Nulla ut erat a orci scelerisque lobortis.
Notification ×
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor lorem, tempus sit amet odio sed, faucibus auctor dolor. Phasellus a tincidunt orci. Nulla ut erat a orci scelerisque lobortis.
Notification ×
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor lorem, tempus sit amet odio sed, faucibus auctor dolor. Phasellus a tincidunt orci. Nulla ut erat a orci scelerisque lobortis.
For more on column layouts, see our Grid docs.