Global notifications display at a global level, thus their namesake, typically above the primary navigation and span the full width of the viewport. They are informational and can link to additional actions and are also dismissible. They can provide positive or negative information. Global notifications are helpful when something happens above the context of specific page content, or when the context referenced in the notice has be removed or unavailable.

Examples

Usage

Rules

  • There should only be one global notification at a time on a page
  • Global notifications span the full width of the viewport and should not be within a parent .container. Instead, they require an internal .container to hold the content of the notification.
  • The nature of the message should align with the visual treatment, e.g. a success notification would use the alert-success style and include the success icon

Constraints

  • Text should always be left justified
  • Including an icon is not necessary, but could help clarify the type of notification

Principle

  • A global notification provides a user with system or page-level contextual messaging

Accessibility

  • A global notification should use role="status" and aria-live="polite" to ensure the notification is read for assistive technology
  • A global notification should receive focus and be visible in the viewport when it has been added to the page or when a new page has been loaded containing a notification if it is actionable
  • Do not rely on color alone to indicate the nature of the status message, especially when the message could be interpreted in different ways

Examples

  • A user has successfully deleted an item from their preferences and since the information deleted is no longer present (context removed), a global notification with the .alert-info style is used.
  • A user is notified with a alert-info that they may not be able to do certain actions on the page due to their membership type.
  • A user visits their club homepage and a global notification with the alert-warning lets them know about scheduled pool maintenance.

Class Names

alert
Required

The base class for alerts and notifications
alert-notification
Required

Applies the basic formatting for a global notification
alert-icon
Modifier

Adds a corresponding icon based on the style of the notification
alert-dismissible
Modifier

Adds the ability to close the notification (also removes from the DOM)
alert-success
Modifier

Styles the notification with the green success style and includes the green checkmark icon if alert-icon is used
alert-info
Modifier

Styles the notification with the blue info style and includes the blue notice icon if alert-icon is used
alert-warning
Modifier

Styles the notification with the yellow warning style and includes the yellow notice icon if alert-icon is used
alert-danger
Modifier

Styles the notification with the danger style and includes the red notice icon if alert-icon is used
fade in
Modifier

Fade out the notification when it‘s dismissible (note there are two separate classes used together)