Skip to main content Skip to navigation Skip to search

CSS

There are several header styles that change the background color of header content and several that group and organize child elements in the header.

Classes

CSS Class Host Element(s) Type Description Required
.header-1 div color+layout Sets the background color option for a header container. yes
.header-2 div color+layout Sets the background color option for a header container. yes
.header-3 div color+layout Sets the background color option for a header container. yes
.header-4 div color+layout Sets the background color option for a header container. yes
.header-5 div color+layout Sets the background color option for a header container. yes
.header-6 div color+layout Sets the background color option for a header container. yes
.header-7 div color+layout Sets the background color option for a header container. yes
.branding div layout Header child container element that containes application logo and title. yes
.header-nav div layout Header child container that contains primary navigation links. yes
.search div layout A form containing a search icon and search input field. no
.header-actions div layout Header child container that contains secondary navigation links. no
.subnav nav layout A sibling element immediately following .header element. no
.nav ul layout Used on an un-ordered list it lays out tab like nave links horizontally. yes
nav-item li layout A list item that contains an anchor tag with the .nav-link class. yes
.nav-link a content A presentation class that styles anchor elements for display in a .subnav container. yes