Types

Page Headers

Headers may be oriented to give the hierarchy of a section in the context of the page.

Page headings are sized using rem and are not affected by surrounding content size.

Content Headers

Headers may be oriented to give the importance of a section.

Content headings are sized with em and are based on the font-size of their container.

Icon Headers

A header can be formatted to emphasize an icon.

Subheaders

Headers may be formatted to label smaller or de-emphasized content.

Content

Image

A header may contain an image.

You can also define an image with props.

Icon

A header may contain an icon.

You can also define an icon with props.

Subheader

Headers may contain subheaders.

You can pass any Subheader content to the Header subheader prop.

States

Disabled

A header can show that it is inactive.

Variations

Dividing

A header can be formatted to divide itself from the content below it.

Block

A header can be formatted to appear inside a content block.

Attached

A header can be attached to other content, like a segment.

Floating

A header can sit to the left or right of other content.

Text Alignment

A header can have its text aligned to a side.

Colored

A header can be formatted with different colors.

Inverted

A header can have its colors inverted for contrast.

Inverted headers use modified light versions of the site color scheme.
This is the bottom