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

Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates

Contributeย  |ย  Updates