Header

The header is an important component in the interface, it is the area dedicated for the navigation across the application and helps users understand what the content of the page is about. They appear at the top of a page, above the main content.

The header is part of the application layout, so it can only be used inside of it. Please check the DxcApplicationLayout documentation.

Specifications

Header design specifications
Header design specifications

Anatomy

Header anatomy
  1. 1.
    Brand image
  2. 2.
    Application name
  3. 3.
    Navigation links
  4. 4.
    Header dropdown
  5. 5.
    Container

Design tokens

Color

Component tokenElementCore tokenValue
backgroundColorContainercolor-white#ffffff
contentColorContentcolor-black#000000
underlinedColorContainercolor-black#000000
hamburguerHoverColorMenu:hovercolor-grey-200#e6e6e6
hamburguerFocusColorMenu:focuscolor-blue-600#0095ff
hamburguerFontColorMenu labelcolor-black#000000
hamburguerIconColorMenu iconcolor-black#000000
menuBackgroundColorMenucolor-white#ffffff
overlayColorOverlaycolor-grey-800-a#000000b3

Typography

Component tokenElementCore tokenValue
hamburguerFontFamilyMenu labelfont-family-sans'Open Sans', sans-serif
hamburguerFontStyleMenu labelfont-style-normalnormal
hamburguerFontSizeMenu labelfont-scale-010.75rem / 12px
hamburguerFontWeightMenu labelfont-weight-semibold600

Border

PropertyElementCore tokenValue
border-widthUnderlineborder-width-22px
border-styleUnderlineborder-style-solidsolid

Size

PopertyElementCore tokenValue
heightContainer-64px
widthContainer-100%

Margin

The margin only applies to the margin-bottom of the header component.

MarginValue
xxsmall6px
xsmall16px
small24px
medium36px
large48px
xlarge64px
xxlarge100px