H1/H2 Header

H3 Header

H4 Header

H5 Header
H6 Header

Note: h1 and h2 tags are styled identically because of the semantic differences. That way you can choose what you want to be the semantic heading of the page without being forced to choose to make it visually different from other headings.


This is a blockquote tag. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

~ Author Name


  1. First Item
  2. Second Item
  3. Third Item

  • First Item
  • Second Item
  • Third Item

Dropcaps and intros are a great way to improve the typography on your site! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Content can be boxed to differentiate it. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


This is a strong tag, and an em tag, this is a mark tag.

This is the result of a small tag.

You can also use code tags very nicely. And pre tags:

function(){
	return "This is a pre tag.";
}

Table Example:

Header Header Header
4.567 7.642 8.623
9.342 1.463 2.674
4.567 7.642 8.623
9.342 1.463 2.674

A BUTTON A HI VIZ BUTTON A BIGGER BUTTON DITTO

Full Width Sections

In full width sections the contrast can be flipped for basic elements and you can choose a custom background color.


H1/H2 Header

H3 Header

H4 Header

H5 Header
H6 Header

Note: h1 and h2 tags are styled identically because of the semantic differences. That way you can choose what you want to be the semantic heading of the page without being forced to choose to make it visually different from other headings.


This is a blockquote tag. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

~ Author Name


  1. First Item
  2. Second Item
  3. Third Item

  • First Item
  • Second Item
  • Third Item

Dropcaps and intros are a great way to improve the typography on your site! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Content can be boxed to differentiate it. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


This is a strong tag, and an em tag, this is a mark tag.

This is the result of a small tag.

You can also use code tags very nicely. And pre tags:

function(){
	return "This is a pre tag.";
}

Table Example:

Header Header Header
4.567 7.642 8.623
9.342 1.463 2.674
4.567 7.642 8.623
9.342 1.463 2.674

A BUTTON A HI VIZ BUTTON A BIGGER BUTTON DITTO

See the Elements

This Page Shows Elements Programmed Into the Template

For example the above is a header/sub-header combo that is being center aligned (they can be left aligned too). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HR Heading

Columns (nestable)

1/2

1/2

1/3

2/3

1/4

3/4

1/5

4/5

2/5

3/5

Teaser/intro text like might be used at a top of a page here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.

Tabled Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Make sure to check out the other demos!

Also note that the footer is used quite simply now, but can be used many ways, including being broken into columns.