Menu

Header
A header provides a short summary of content

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.

First header

Second header

Third header

Fourth header

Fifth header

Content Headers

Headers may be oriented to give the importance of a section in the context of the content that surrounds it

Content headings are sized with em and are based on the font-size of their container.
Huge Header
Large Header
Medium Header
Small Header
Tiny Header

Icon Headers

A header can be formatted to emphasize an icon

Account Settings
Manage your account settings and set e-mail preferences.

Friends

Sub Headers

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

Price

$10.99
Molly
Coordinator
Elyse
Developer
Eve
Project Manager

Content

Image

A header may contain an image

Learn More

Patrick

Plug-ins
Check out our plug-in marketplace

Icon

A header may contain an icon

Uptime Guarantee

Account Settings
Manage your preferences

Subheader

Headers may contain subheaders

Account Settings
Manage your account settings and set e-mail preferences.

H1
Sub Header

H2
Sub Header

H3
Sub Header

H4
Sub Header

H5
Sub Header

States

Disabled

A header can show that it is inactive

Disabled Header

Variations

Dividing

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

Dividing Header

Block

A header can be formatted to appear inside a content block

Block Header

Attached

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

Top Attached

Attached

Bottom Attached

Floating

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

Go Forward

Go Back

Text Alignment

A header can have its text aligned to a side

Right

Left

This should take up the full width even if only one line

Center

Colored

A header can be formatted with different colors

Primary

Secondary

Red

Orange

Yellow

Olive

Green

Teal

Blue

Purple

Violet

Pink

Brown

Grey

Inverted

A header can have its colors inverted for contrast

Inverted headers use modified light versions of your site's color scheme that are adapted to have more contrast on dark background

Red

Orange

Yellow

Olive

Green

Teal

Blue

Purple

Violet

Pink

Brown

Grey

Dimmer Message
Dimmer sub-header