Status Alerts
height: 24px;
width: 1022px;
border-radius: ;
border: 1px #000000;
background: #00abf3;
opacity: 1;
color: #010101;
height: 24px;
width: 1022px;
border-radius: ;
border: 1px #000000;
background: #1aac60;
opacity: 1;
color: #010101;
height: 24px;
width: 1022px;
border-radius: ;
border: 1px #000000;
background: #ffc002;
opacity: 1;
color: #000000;
height: 24px;
width: 1022px;
border-radius: ;
border: 1px #000000;
background: #e5004c;
opacity: 1;
color: #010101;
height: 24px;
width: 1022px;
border-radius: ;
border: 1px #000000;
background: #323435;
opacity: 1;
color: #010101;
Dialog Alerts
height: 203px;
width: 374px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 212px;
width: 502px;
border-radius: 4;
border: 2px #000000;
background: #000000;
opacity: 1;
color: #000000;
Complex Dialog
height: 482px;
width: 572px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 373.15093994141px;
width: 696px;
border-radius: 4;
border: 2px #000000;
background: #000000;
opacity: 1;
color: #000000;
Simple notifications
height: 111px;
width: 379px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: ;
height: 85px;
width: 404px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: ;
Stacked notifications & notifications with CTA
height: 315px;
width: 490px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 177px;
width: 374px;
border-radius: ;
border: 1px SOLID #dcdedf;
background: #ffffff;
opacity: 1;
color: #000000;
Progress notifications
height: 256px;
width: 368px;
border-radius: 2;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #010101;
height: 96px;
width: 368px;
border-radius: 2;
border: 1px #000000;
background: #0073e7;
opacity: 1;
color: #010101;
Login Screen
We are planning to add this in future DS releases
Tooltip with the pointer in different directions
height: 36px;
width: 104px;
border-radius: ;
border: 1px SOLID #bdbec0;
background: #ffffff;
opacity: 1;
color: #000000;
height: 36px;
width: 104px;
border-radius: ;
border: 1px SOLID #bdbec0;
background: #ffffff;
opacity: 1;
color: #000000;
height: 30px;
width: 110px;
border-radius: ;
border: 1px SOLID #bdbec0;
background: #ffffff;
opacity: 1;
color: #000000;
height: 30px;
width: 110px;
border-radius: ;
border: 1px SOLID #bdbec0;
background: #ffffff;
opacity: 1;
color: #000000;
