Alert list item

The Alert list item are displayed in the Alert center but also in other parts of the application where alerts should be displayed.

Variations

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

Alarm

The alarm uses the alarm color and icon.

Warning

The warning uses the warning color and icon.

Caution

The caution list item uses the caution color and icon.

OK / Running

An alert list item displaying that things are running ok, uses the running color and icon.

Specs

How the Alert list items are built up and styled.

Anatomy

The Alert list items are nested components with text and UI components.

Components
1
Alert icon
2
Alert text
3
Divider
4
Raised standard button
Details
5
Clock
6
Time since activated

Colors

The Alert list item uses standard colours for text and dividers. Go to the Alert icon page to see color definitions for the alert indicator.

Element
Color / Style name
1
Text
color-ui-element-active
2
Divider
color-ui-border-divider

Typography and icons

The list item uses body text.

Text category
Text attributes
1
Body
AA
Typeface: Open Sans
Weight: Regular
Size: 16px
Lineheight: 24px

Measures and spacing

The width of the list item may vary based on the container size, and normal notification text length. All items in the same container have the same width.

1
Component measures
2
Spacing
3
Border sizes