Overlays
Alert
height: 24px;
width: 559px;
border-radius: ;
border: 1px #000000;
background: #0064ca;
opacity: 1;
color: #010101;
Alert types
height: 24px;
width: 559px;
border-radius: ;
border: 1px #000000;
background: #e5004c;
opacity: 1;
color: #010101;
height: 24px;
width: 559px;
border-radius: ;
border: 1px #000000;
background: #1aac60;
opacity: 1;
color: #000000;
height: 24px;
width: 559px;
border-radius: ;
border: 1px #000000;
background: #ffc002;
opacity: 1;
color: #000000;
height: 24px;
width: 559px;
border-radius: ;
border: 1px #000000;
background: #35434d;
opacity: 1;
color: #010101;
Examples
height: 184px;
width: 944px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 209px;
width: 774px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Dialogs
Dialogs usually contain a message followed by a call to action to the user. They can have optional icons or illustrations to support the message, input fields, or other elements for user interaction. Alert dialogs won’t be dismissed until choosing an action, while commercial dialogs can be dismissed with a close button.
height: 146px;
width: 403px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Alert dialogs
height: 199px;
width: 307px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 164px;
width: 491px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Dialogs with input
height: 352px;
width: 328px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 431px;
width: 395px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Commercial dialog
height: 415px;
width: 674px;
border-radius: 4;
border: 2px #000000;
background: #000000;
opacity: 1;
color: ;
Notifications
Notifications can inform the user about a recent event, the progress status of certain items, or have a message followed by an action. Their size and content may vary, and they can appear at the top right corner of the page, or the bottom left or right.
Notifications that don’t require any actions will automatically disappear after 15-30 seconds, while others that require interaction will not disappear.
height: 118px;
width: 380px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Notification variations
height: 190px;
width: 295px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 192px;
width: 323px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Stacked notifications
height: 299px;
width: 440px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Top notifications
height: 254px;
width: 591px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 253px;
width: 590px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Bottom notifications
height: 253px;
width: 590px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
height: 253px;
width: 590px;
border-radius: ;
border: px #000000;
background: #000000;
opacity: 1;
color: ;
Tooltip
height: 36px;
width: 104px;
border-radius: ;
border: 1px #000000;
background: #323435;
opacity: 1;
color: #010101;
Tooltip up
height: 36px;
width: 138px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: ;
Tooltip right
height: 44px;
width: 110px;
border-radius: ;
border: 1px #000000;
background: #323435;
opacity: 1;
color: #010101;
Tooltip left
height: 44px;
width: 110px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: ;
