Alert

height: 24px;

width: 559px;

border-radius: ;

border: 1px #000000;

background: #0064ca;

opacity: 1;

color: #010101;

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;

On top of content

height: 209px;

width: 774px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

On top of page

height: 184px;

width: 944px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Dialog

Alert dialogs

height: 192px;

width: 412px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 192px;

width: 417px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 192px;

width: 417px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 192px;

width: 417px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Severe alert dialog

height: 192px;

width: 378px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 192px;

width: 377px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Form dialogs

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: ;

Notification

Basic notification

height: 118px;

width: 380px;

border-radius: 4;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

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

Tooltip with light and dark background

height: 37px;

width: 104px;

border-radius: ;

border: 1px #000000;

background: #323435;

opacity: 1;

color: #010101;

height: 37px;

width: 104px;

border-radius: ;

border: 1px SOLID #f1f2f3;

background: #ffffff;

opacity: 1;

color: #000000;

Pointing up

height: 54px;

width: 164px;

border-radius: ;

border: 1px #000000;

background: #323435;

opacity: 1;

color: #010101;

Tooltip pointing left and right

height: 64px;

width: 130px;

border-radius: ;

border: 1px #000000;

background: #323435;

opacity: 1;

color: #010101;

height: 64px;

width: 125px;

border-radius: ;

border: 1px #000000;

background: #323435;

opacity: 1;

color: #010101;

Questions? Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates