Types
Page Headers
Headers may be oriented to give the hierarchy of a section in the context of the page
First header
![](/images/wireframe/short-paragraph.png)
Second header
![](/images/wireframe/short-paragraph.png)
Third header
![](/images/wireframe/short-paragraph.png)
Fourth header
![](/images/wireframe/short-paragraph.png)
Fifth header
![](/images/wireframe/short-paragraph.png)
Content Headers
Headers may be oriented to give the importance of a section in the context of the content that surrounds it
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
![](/images/wireframe/short-paragraph.png)
Icon Headers
A header can be formatted to emphasize an icon
Account Settings
Manage your account settings and set e-mail preferences.
Friends
![](/images/wireframe/centered-paragraph.png)
Sub Headers
Headers may be formatted to label smaller or de-emphasized content.
Price
$10.99![](/images/avatar2/small/molly.png)
![](/images/avatar2/small/elyse.png)
![](/images/avatar2/small/eve.png)
Content
Patrick
![](/images/wireframe/short-paragraph.png)
Plug-ins
Check out our plug-in marketplace
![](/images/wireframe/short-paragraph.png)
Account Settings
Manage your preferences
![](/images/wireframe/short-paragraph.png)
Subheader
Headers may contain subheaders
Account Settings
Manage your account settings and set e-mail preferences.
![](/images/wireframe/short-paragraph.png)
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
![](/images/wireframe/short-paragraph.png)
Variations
Dividing
A header can be formatted to divide itself from the content below it
![](/images/wireframe/short-paragraph.png)
Dividing Header
![](/images/wireframe/short-paragraph.png)
Block
A header can be formatted to appear inside a content block
Block Header
![](/images/wireframe/media-paragraph.png)
Attached
A header can be attached to other content, like a segment
Top Attached
![](/images/wireframe/paragraph.png)
Attached
![](/images/wireframe/paragraph.png)
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