Masthead

The Masthead component helps to differentiate between the top hierarchy functions and the content on the canvas. It functions as a type of toolbar for primary actions, such as navigation and search, and secondary actions, such as user profile actions or application setting actions. These actions can be found by using the icons on the right side. The masthead can contain tabs or breadcrumbs for navigation or only a title.

height: 56px;

width: 944px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #010101;

Tabs

height: 40px;

width: 191px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Sizes

height: 93px;

width: 191px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 93px;

width: 191px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Emphasis tabs

height: 48px;

width: 241px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Breadcrumbs

height: 42px;

width: 345px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Small size

height: 40px;

width: 310px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Hover

height: 50.43310546875px;

width: 309px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Side Navigation

The side navigation pane should be used as second or third-level navigation when the sub-navigation includes too many items. On complex navigation systems, we can use the hierarchical tree, which can include as many sub-categories as needed.

height: 448px;

width: 72px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 448px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Left side navigation

height: 757px;

width: 590px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Tree View

height: 261px;

width: 240px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 261px;

width: 240px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 261px;

width: 240px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Levels expanded

height: 160px;

width: 256px;

border-radius: 4;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

The tree-view can only have one item selected at a time. Clicking the item row will select it.

height: 234px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 234px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 234px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Clicking the chevron alone will only expand the item, but it won’t select it.
When selecting a parent item, all of its children will also be highlighted.

height: 345px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 345px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 345px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Some products can support actions on hover for the tree view. In that case, additional action icons will appear from the right side when hovering on the row item.

This is optional and accessibility must be taken into consideration.

height: 128px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Accordion

height: 261px;

width: 240px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 261px;

width: 240px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 261px;

width: 240px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Section open

height: 384px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Content variations

height: 424px;

width: 415px;

border-radius: 4;

border: 1px #000000;

background: #fafafa;

opacity: 1;

color: #000000;

height: 21.43310546875px;

width: 19.525573730469px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: #000000;

Pagination

height: 32px;

width: 368px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 45.43310546875px;

width: 368px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Raised pagination

height: 32px;

width: 421px;

border-radius: ;

border: 1px SOLID #0073e7;

background: #000000;

opacity: 1;

color: #000000;

Questions? Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates