You can set the colour theme of the page by putting a {color}-theme class on the body on the page. You can use the selector in the top left to experiment with the different themes.

This also works on individual modules but is discouraged for anything othe than a front page.

Theme classes style all links, buttons and headers where appropriate for you.

• Pink
• Red
• Green
• Blue
• Purple
• Yellow
• Charcoal (Default)

Headers can be used in a 'traditional' way and will work perfectly. However, if you choose to use HTML5 sectioning (<section> or <article>), then you may use helper classes to achieve the same look.

Helper classes are: .heading-1 .heading-2 .heading-3 and these can be applied to any heading.

Paragraghs

A paragraph of text.

Another paragraph of text.

Blockquote

Something someone said

Small

Small text can also be achieved with the class .text-small

lead text

Lead text can be achieved with the class text-lead

• List item 1
• List item 2
  1. Sub list item 1
  2. Sub list item 2
  3. Sub list item 3
• List item 3
  • Sub list item 1
  • Sub list item 2
  • Sub list item 3

1. List item 1
2. List item 2
   1. Sub list item 1
   2. Sub list item 2
   3. Sub list item 3
3. List item 3
   • Sub list item 1
   • Sub list item 2
   • Sub list item 3

Standard link

Secondary link

Secondary link

Buttons