Notification bar

Introduction

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. The nested button allows to dismiss a notification. There can be multiple layers of notification bars, the most recent will appear on top.

Styleguide

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

Description

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

Icon

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

Placement

The notification bar appears on the very top of the view.

Behavior

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)