Component

Universal Header

SCSS Location: /styles/scss/partial/_universal-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 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.

No Image

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.

Image on the Left

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.

Lorem ipsum dolor sit amet.

Image on the Right

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.

Lorem ipsum dolor sit amet.

All Elements with Image on the Left

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.

Lorem ipsum dolor sit amet.

Inverse Simple with image on right

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.

Lorem ipsum dolor sit amet.