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;

Notification

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

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;

Questions? Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates