Switch to WilmingtonNotifications
Notifications deliver page-level contextual help to guide the user through a task. Text appears within a color-coded container to give the message visual impact. Add an icon to draw additional focus to the notification. Use these classes only with <div> elements.
Variants
Notifications appear either as soon as the page loads or as triggered by an input field blur state. A notification will push all content below it down rather than appearing fixed above it.
<div class="c-notification--info">
<div class="c-notification__icon">
<i class="icon icon--info"></i>
</div>
<div class="c-notification__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
dictum, nisi sed commodo vulputate, arcu libero imperdiet nisi,
nec tincidunt velit quam ac sem.
</div>
</div>
<div class="c-notification--inline-info">
<div class="c-notification__icon">
<i class="icon icon--info"></i>
</div>
<div class="c-notification__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="c-notification--success">
<div class="c-notification__icon">
<i class="icon icon--success"></i>
</div>
<div class="c-notification__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
dictum, nisi sed commodo vulputate, arcu libero imperdiet nisi,
nec tincidunt velit quam ac sem.
</div>
</div>
<div class="c-notification--inline-success">
<div class="c-notification__icon">
<i class="icon icon--success"></i>
</div>
<div class="c-notification__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="c-notification--warning">
<div class="c-notification__icon">
<i class="icon icon--exclamation"></i>
</div>
<div class="c-notification__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
dictum, nisi sed commodo vulputate, arcu libero imperdiet nisi,
nec tincidunt velit quam ac sem.
</div>
</div>
<div class="c-notification--inline-warning">
<div class="c-notification__icon">
<i class="icon icon--exclamation"></i>
</div>
<div class="c-notification__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<div class="c-notification--error">
<div class="c-notification__icon">
<i class="icon icon--error"></i>
</div>
<div class="c-notification__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
dictum, nisi sed commodo vulputate, arcu libero imperdiet nisi,
nec tincidunt velit quam ac sem.
</div>
</div>
<div class="c-notification--inline-error">
<div class="c-notification__icon">
<i class="icon icon--error"></i>
</div>
<div class="c-notification__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Design Environment
Elevation
Inline notifications will push all content below them down rather than appearing elevated above it. Page-level notifications can appear either embedded at the top of the page, or elevated on the attention pane to allow page content to scroll behind. When elevated, the notification will use a medium shadow.
Generally, you should elevate a notification with information that the user will need to remain aware of as they navigate the page content, for example, a page-level error that can be resolved from two or more parts of the page. Notifications that contain information that is not pertinent to the user's task, for example a page-level information notification of an upcoming system outage, should be embedded within the layout so as not to distract the user from the page content they're interacting with.