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.
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.
