Alert notification

The Alert notification are displayed in the Topbar when an alert is activated.

Variations

The alert notification can be displayed in different versions based on the alert level.

Topbar notification

The color and icon on the alert icon changes based on the alert level.

Specs

How the Alert notification are built up and styled.

Anatomy

The alert notification is a nested component with text and UI components.

Colors

The Alert notification use standard colours for text and dividers. Go to the Alert icon page to see color definitions for the alert indicator.

Bright

Element

Color / Style name

1

Border

color-ui-border-outline

2

Alert text

color-ui-element-acitve

3

Clock text

color-ui-element-neutral

Typography and icons

The alert notification text uses body text, but the clock use the subtitle style.

Bright

Text category

Text attributes

1

Body

AA

Typeface: Open Sans

Weight: Regular

Size: 16px

Lineheight: 24px

2

Subtitle

AA

Typeface: Open Sans

Weight: Regular

Size: 24px

Lineheight: 32px

Measures and spacing

The width of the list item may vary based on the Topbar width.