--- layout : 'default' css : 'header' title : 'Header' description : 'Headers provide a short summary of content' type : 'UI Element' --- <%- @partial('header') %>

Types

Header

A standard header

Account Settings

Descriptive Headers

Headers may have sub headers containing further context to the section

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

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

Icon

A header can be formatted to emphasize an icon

Questions
Have any questions? Contact Us

Page Headings

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

Page headings size themselves relative to the base font of the entire page not the surrounding text.

First header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Second header

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Third header

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Fourth header

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Fifth header

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

Content Headings

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

Content headings size themselves relative to the base font of the surrounding text
Huge Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Large Header

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

Medium Header

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Small Header

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Tiny Header

Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.

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

The nature of dogs

Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.

When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!

Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.

Block

A header can be formatted to appear inside a content block

Block Header

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Attached

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

Section 1

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Section 2

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Thanks for reading

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

Center

Colors

A header can be formatted with different colors

Black
An excellent color

Blue
An excellent color

Red
An excellent color

Green
An excellent color

Purple
An excellent color

Teal
An excellent color

Inverted

A header can have its colors inverted for contrast

Black

Blue

Red

Green

Purple

Teal