Alert Center
The Alert center is located in the Topbar, and gathers the alert notifications for the application in one place.
Variations
The Application launcher is a part of the Topbar, and is an easy access to apps in addition to a full screen launcher. The amount of app displayed may vary based on the screen size (4x4 vs 3x3).
Alert center in Topbar
The Alert center is accessible from the Topbar.
Specs
How the Alert center are built up and styled.
Anatomy
The Alert center is mainly built up by a container displaying Alert list items.
Colors
Element
Color / Style name
1
Topbar border + Text
color-on-background-active
2
Container
color-surface-global
3
Outline
color-border-outline
4
Container button
color-surface-section
5
Icon
color-on-background-neutral
Typography and icons
Text category
Text attributes
1
Body
AA
Typeface: Open Sans
Weight: Regular
Size: 16px
Lineheight: 24px
2
Alert icon
Name: Notifications
Size: 24px
Measures and spacing
Note that the top-border lays on top of the bottom-border in the Topbar.
1
Component measures
2
Spacing
3
Border sizes