There are three main layouts, with some variations.

• Standard layout, best suited for most webpages.
  • Example Standard Single Column
  • Example Standard Single Column with Sidebar
• Wide layout, suited for webpages that need a little more width (approximately 75% of browser width).
  • Example Wide Single Column
  • Example Wide Single Column with Sidebar
• Homepage layout, suited for site homepages and key landing pages. Example Homepage

Elements h1, h2, h3, h4, h5, h6 make up the heading content category.

Elements a class="button"

button styles for light backgrounds:

Button styles for dark backgrounds:

Code snippets for each button by their corresponding number:

1. <button>...</button>
2. <button class="red">...</button>
3. <button class="border">...</button>
4. <button class="border-red">...</button>
5. <button class="white">...</button>
6. <button class="border-white">...</button>

Standard Blockquote

Quote text. Nec feugiat nisl pretium fusce id velit ut. Eget magna fermentum iaculis eu non. Luctus venenatis lectus magna fringilla urna porttitor dolor purus. Tempor ullamcorper a lacus vestibulum sed arcu non odio. Mauris cursus mattis molestie a iaculis. Arcu cursus vitae congue mauris rhoncus.

- H6 Attribution Here, Title and Other Things

Fancy Blockquote

Quote text. Nec feugiat nisl pretium fusce id velit ut. Eget magna fermentum iaculis eu non. Luctus venenatis lectus magna fringilla urna porttitor dolor purus. Tempor ullamcorper a lacus vestibulum sed arcu non odio. Mauris cursus mattis molestie a iaculis. Arcu cursus vitae congue mauris rhoncus.

- H6 Attribution Here, Title and Other Things

There are two fonts supported. Within css the following is their name:

• Standard Roman Helvetica:
  font-family: "Neue Helvetica W01", Helvetica, Arial , sans-serif;
  
• Condensed Helvetica:
  font-family: "Neue Helvetica Cn", Helvetica, Arial , sans-serif;
  

Click for full list of dividers and separators.

This is a headline for followed by a short, decorative divider

Laudem et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum autem vel eum iure reprehenderit, qui dolorem ipsum, quia dolor sit aut quid et voluptatem sequi nesciunt, neque disputatione, quam ob aliquam quaerat voluptatem accusantium doloremque laudantium, totam rem voluptas expetenda, fugiendus dolor repellendus. At magnum periculum adiit in quo minus id.

Above this headline is an example of a Horizontal Rule

Laudem et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum autem vel eum iure reprehenderit, qui dolorem ipsum, quia dolor sit aut quid et voluptatem sequi nesciunt, neque disputatione, quam ob aliquam quaerat voluptatem accusantium doloremque laudantium, totam rem voluptas expetenda, fugiendus dolor repellendus. At magnum periculum adiit in quo minus id.

Example of paragraph text with separator

Laudem et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum autem vel eum iure reprehenderit, qui dolorem ipsum, quia dolor sit aut quid et voluptatem sequi nesciunt, neque disputatione, quam ob aliquam quaerat voluptatem accusantium doloremque laudantium, totam rem voluptas expetenda, fugiendus dolor repellendus. At magnum periculum adiit in quo minus id.

This paragraph is nested inside an article element. It contains many different, sometimes useful, HTML5 elements. Of course there are classics like emphasis, strong, and small but there are many others as well. Hover the following text for abbreviation element: abbr. You can define deleted text which often gets replaced with inserted text.

You can also use keyboard text, which sometimes is styled similarly to the <code> or samp elements. Even more specifically, there is an element just for variables. Not to be mistaken with block quotes below, the quote element lets you denote something as quoted text. Lastly don't forget the sub (H₂O) and sup (E = MC²) elements.

Lists

ul and ol:

• Unordered List item one
  • Nested list item
    • Level 3, item one
    • Level 3, item two
    • Level 3, item three
    • Level 3, item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

1. List item one
   1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
2. List item two
3. List item three
4. List item four

Tables

In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.