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