Notification bar


The notification bar is used for global notifications, concerning the whole environment or account.

Notification bar example

The bar can show

  • messages, e.g. "A new security gateway is available for you."
  • incidents and alerts, e.g. "Your account is about to expire."

The messages may contain links that allow users to perform related actions directly. An abort icon button allows to dismiss a notification. There can be multiple layers of notification bars, the most recent on top.


  • Use a white notification bar for an informational message.
bar-color: #fff
  • Use a yellow notification bar for incidents and alerts.
bar-color: $warning
Notification bar style guide
x: 40px
y: 12px


font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700
vertical-align: center


width: 20px
height: 20px
color: $turquoise-600
vertical-align: center


The notification bar slides in from left to right directly underneath the menubar. By clicking the abort icon the bar slides back out to the left again.

Notification bar appearance
The transition should last 500ms.
transition: translate 500ms cubic-bezier(0.25, 0.1, 0.25, 1)