Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

You can break up headings with the .break-line class on span like this:

Really long heading that needs to be split right here or else people will come and complain

Do not use a br tag as they are not supposed to be used in heading contexts.

An introductory paragraph is a great way to summarise the content before the reader really digs into the detail of the story.

This is a paragraph, the most common element on the site. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

  • Now we start a list.
  • Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
  • Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.

Content can contain inline styles such as hyperlinks. It's also likely that we will need to emphasise text from time to time.

Quotes

This is a blockquote, a useful pull-out element highlighting 3rd party endorsement and opinion.

Centre Quote

Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor.

This is a centre quote that is not immediately attributable to the adjacent content but serves to break up page sections.

Quote Source, Institution

One after the other, remove the borders

Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor.

This is a centre quote that is not immediately attributable to the adjacent content but serves to break up page sections.

Quote Source, Institution

This is a centre quote that is not immediately attributable to the adjacent content but serves to break up page sections.

Quote Source, Institution

This is a centre quote that is not immediately attributable to the adjacent content but serves to break up page sections.

Quote Source, Institution

Published 22 November, 2013 by Graham Charlton @ Econsultancy

Graham is the Editor in Chief at Econsultancy. Blogs about ecommerce, mobile commerce, email marketing and more.

You can follow Graham on or connect on and

Base page default styles

These styles show what basic elements look like without CSS class customisations.

Headings

Heading single h1

Content

h1 link lorem ipsum dolor sit

Lorem ipsum dolor sit amet, small text consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

Inline markup

I am the a tag (external) example
I am the a tag (internal) example
I am the a tag (hash) example
I am the abbr tag example
I am the acronym tag example
I am the b tag example
I am the cite tag example
I am the code tag example
I am the del tag example
I am the dfn tag example
I am the em tag example
I am the i tag example
I am the ins tag example
I am the kbd tag example
I am the q tag inside a q tag example
I am the s tag example
I am the samp tag example
I am the small tag example
I am the span tag example
I am the strike tag example
I am the strong tag example
I am the sub tag example
I am the sup tag example
I am the tt tag example
I am the var tag example
I am the u tag example

Block level markup

I am the address tag: somewhere, World

h2 Sub header link

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

h3 link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

h4 link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

h5 link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

h6 link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

paragraph 1 link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

paragraph 2 link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit small text arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

  • List Items link
  • List Items
    • List Items link
    • List Items
      • List Items link
      • List Items - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      • List Items
      • List Items
      • List Items
    • List Items
    • List Items
    • List Items
  • List Items
  • List Items
  • List Items

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit small text arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

  1. List Items link
  2. List Items
    1. List Items link
    2. List Items
      1. List Items link
      2. List Items
      3. List Items
      4. List Items
      5. List Items
    3. List Items
    4. List Items
    5. List Items
  3. List Items
  4. List Items
  5. List Items

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit small text arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

Heading then list combinations

  • List Items link
  • List Items - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • List Items

Heading then list combinations

  • List Items link
  • List Items - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • List Items

Definition Lists

dl title with a longer title to allow for break
dl item
dl title
dl longer list item to allow for break, I'm talking a REALLY longer list item
dl title
dl item
dl title
dl item
dl title
dl item
dl longer list title to allow for break
dl longer list item to allow for break
dl longer list title to allow for break
dl longer list item to allow for break

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit small text arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat aliquam quam, at pharetra purus mattis dictum. Fusce vel bibendum sem. Maecenas at elementum nibh. Mauris accumsan mattis turpis, vitae blandit small text arcu ornare ultricies. Duis lacus diam, scelerisque vitae volutpat in, laoreet vel mauris. Etiam id nibh purus. Nulla facilisi. Vivamus lobortis varius velit, at mollis urna hendrerit eu. Curabitur malesuada, tortor non pharetra tincidunt, augue orci molestie nisl, at cursus magna est in ante. Ut dui lacus, elementum nec pellentesque nec, vestibulum eu dolor. Nam sit amet ligula mi, eget dapibus dui.