Provides styles for the different types of notifications that communicate
information to user and are usually displayed at the top of the page.
Types
There are four type of notifications available. The notifications are styled
using the class .notification along with the proper class for the
notification type (eg. .notification--success for a success type).
Your preferences have been updated and changes have been saved.
Oh snap! Change a few things up and try submitting again.
This is a preliminary review. Come back for our full review on June 30, 2017.
Are you a parent? We would love your input to improve our site.
<div class="notification notification--success">
Your preferences have been updated and changes have been saved.
</div>
<div class="pb--base"></div>
<div class="notification notification--error">
Oh snap! Change a few things up and try submitting again.
</div>
<div class="pb--base"></div>
<div class="notification notification--alert">
This is a preliminary review. Come back for our full review on June 30, 2017.
</div>
<div class="pb--base"></div>
<div class="notification notification--info">
Are you a parent? We would love your input to improve our site.
</div>
Icon
By default, the notification will include an icon before the notification text.
Each notification type will have an associated icon to it.
If needed, the icon can be removed using the .notification--no-icon class.
Your preferences have been updated and changes have been saved.
<div class="notification notification--success notification--no-icon">
Your preferences have been updated and changes have been saved.
</div>
Dismissible
Notifications can be dismissed using a button element as part of the
notification. The button must have the data-dismiss="notification"
attribute for the dismiss work as expected. The button can also use the
.notification__close class to properly position it inside the notification.
In order to get the X close button the button must use
the Close atom styles. Check Close
atom for more information.
This alert needs your attention, but it's not super important.
<div class="notification notification--info">
This alert needs your attention, but it's not super important.
<button class="notification__close close" data-dismiss="notification" aria-label="Close"></button>
</div>
Links
Notification can contian links as part of the notification text. In order to
get link styles the links must use the Link atom styles. Check
Link atom for more information.
<p>Get a bundle with all notification styles.</p>
<a href="/styles/molecules/notification.css" download="cs-notification.css" target="_blank" class="btn btn--primary">Download</a>