Notifications provide feedback about the system status and activity.

To see a detailed explanation of all existing classes, please refer to the usage table below.

Notification severity states

There are four different kinds of notifications, each of them can have (optional) additional information.

Error/alert notification
Warning notification
Success notification
Info notification

Example 1: Standalone preview

Example 2: Application integration


.notification .is-error,.is-alert .is-warning .is-success .is-info Sets the appropriate severity state for a notification.
.notification .is-hidden Moves a notification out of the viewport so that other notifications can slide into view. Remove this class to re-positions the notification again in the visible part of the viewport. Remove the element from the DOM if you want to delete a notification.
.notification__details   An optional wrapper element for additional content.
.notification__details .is-expanded Add this class to expand the wrapper element. Remove the class to collapse the container again.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top