Badge

Types

height: 64px;

width: 49px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 49px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 56px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 49px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 49px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 49px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Sizes

height: 64px;

width: 58px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 58px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 58px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 58px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 58px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Optional outline

height: 49px;

width: 51px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 34px;

width: 34px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Positioning

height: 64px;

width: 185px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 72px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 72px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Loader

Static

height: 20px;

width: 40px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 20px;

width: 40px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

Animatedย 

Spinner

Staticย 

height: 39px;

width: 39px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 39px;

width: 39px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 39px;

width: 39px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

Progress Bar

height: 8px;

width: 315px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Left label

height: 32px;

width: 277px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Right label

height: 32px;

width: 277px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Questions? Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates