Types
Page Headers
Headers may be oriented to give the hierarchy of a section in the context of the page
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





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


Content
Patrick

Plug-ins
Check out our plug-in marketplace

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

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
Red
Orange
Yellow
Olive
Green
Teal
Blue
Purple
Violet
Pink
Brown
Grey
Inverted
A header can have its colors inverted for contrast