Universal Header

Description

A set of elements to be used as a header area for various sections across the site.

Guidelines

If the section has a dark background, add the class universal-header__container--inverse to render light text.

The Universal Header heading by default is an h3 tag, but is conditionally rendered as a p tag if an eyebrow exists.

The first and last elements of the Universal Header should have no vertical margin or padding. Parent containers will provide padding.

To display the background image on the left, apply the class universal-header__container--left to the parent container.

The component defaults to display the image on the right, so no modifier is needed.

Usage

The Universal Header may be printed inside of a header tag depending on the context.