Layout

Masthead

The masthead is commonly used for global actions such as main navigation across the product, search, profile actions, or application setting actions. Sometimes it can also display page titles or breadcrumbs.
The masthead can also have a two-level navigation option with secondary tabs.

height: 56px;

width: 944px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #010101;

Two-level navigation

height: 104px;

width: 944px;

border-radius: ;

border: 1px #000000;

background: #ffffff;

opacity: 1;

color: #000000;

Tabs

Tabs can be used to split up content into different sections. The default tabs use the secondary style. In cases where more emphasis is required, it is possible to use the primary 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: ;

States

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

height: 93px;

width: 191px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Emphasis / Primary style

height: 48px;

width: 241px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Pagination

height: 32px;

width: 368px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Hover

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;

Side Navigation

The side navigation menu is primarily used for navigating through content on the same page. While collapsed, it shows only icons for main categories.

height: 448px;

width: 72px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 449px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Navigation menu placement on the screen

height: 757px;

width: 590px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Accordion

An accordion is used to de-clutter pages with a lot of content. It can have only one tab open at a time or multiple, depending on usage.

height: 384px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Content types

height: 392px;

width: 415px;

border-radius: 4;

border: 1px #000000;

background: #ffffff;

opacity: 1;

color: #000000;

height: 21.43310546875px;

width: 19.525573730469px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: #000000;

Possible layout placements for accordions

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

Tree view

A tree view list can be used for any content that requires multiple levels of hierarchy.ย 

height: 160px;

width: 256px;

border-radius: 4;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Possible layout placements for a tree view list

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

Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates

Contributeย  |ย  Updates