Component

Universal Header

SCSS Location: /styles/scss/partial/_content-header.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

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 content-header__container--inverse to render light text.

The Universal Header heading by default is an h2 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.

Usage

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

Simple

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

With All Elements

ALT-TEXT

Eyebrow

Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Inverse

Eyebrow

Lorem ipsum dolor sit amet, consectetur adipiscing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Duis aute irure dolor in reprehenderit.

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.