Alert center

Updated:

May 11, 2020

The Alert center is located in the Topbar, and gathers the alert notifications for the application in one place.

Variations

The alert center is a part of the Topbar, and offer access to a short alarm history. The alert center link open up the full BAM system.

Alert center in Topbar

How the Alert center are built up and styled.

Alert center in Topbar

How the Alert center are built up and styled.

Component building blocks

How the Alert center are built up and styled.

Anatomy

The Alert center is mainly built up by a container displaying Alert list items.

Component elements
1
Container
2
Border
Topbar

Colors and styles

Element
Color / Style name
1
Border
This is some text inside of a div block.
2
Container
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
4
Container
This is some text inside of a div block.
5
Stepper Container
This is some text inside of a div block.
Element
Color / Style name
1
Border
This is some text inside of a div block.
This is some text inside of a div block.
2
Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
This is some text inside of a div block.
4
Container
This is some text inside of a div block.
This is some text inside of a div block.
5
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Border
This is some text inside of a div block.
This is some text inside of a div block.
2
Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
This is some text inside of a div block.
4
Container
This is some text inside of a div block.
This is some text inside of a div block.
5
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Border
This is some text inside of a div block.
This is some text inside of a div block.
2
Container
This is some text inside of a div block.
This is some text inside of a div block.
3
Border
This is some text inside of a div block.
This is some text inside of a div block.
4
Container
This is some text inside of a div block.
This is some text inside of a div block.
5
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.

Typography and icons

The label tells you about your location in the application and makes it easy to access other parts.

Element
Text style
2
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Body
1
Stepper Container
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Selected Body
Element
Text style
2
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Body
1
Stepper Container
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Selected Body

Specs

This component is built up by a oval slider and icons.

1
Component measures
2
Spacing
3
Border sizes
1
Component measures
2
Spacing
3
Border sizes

States

No items found.
Submit feedback