Typography

The Grid Template comes with some simple headings and colour options to support the text of your site as well as a wide rande if classes for adding simple colour options and some spiffy new grungy icon classes uses the orange sticker icons.

Heading 1

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

Heading 2

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

Heading 3

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

Heading 4

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

Heading 5

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

Heading 6

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

This is a paragraph with the first letter in a span class called dropcap.Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

The following are simple colour stylings for divs and paragraphs.

This content is placed within a paragraph with the class blackbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class greenbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class redbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class bluebox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class yellowbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class brownbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class purplebox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This is some bold text.

This is some italicised text.

To apply any of these styles simply add the class of the colour that you want applied to your list.

• This is a list item with the class blue assigned to it.
• This is a list item with the class brown assigned to it.
• This is a list item with the class red assigned to it.
• This is a list item with the class green assigned to it.
• This is a list item with the class yellow assigned to it.
• This is a list item with the class black assigned to it.

And just to add some more flavour here are some colours for your spans.

• This is a span with the class blue
• This is a span with the class yellow
• This is a span with the class black
• This is a span with the class red
• This is a span with the class green
• This is a span with the class brown
• This is a span with the class purple

The classes below are easily accessed in the wysiwyg editor when editing a content item. We always use and recommend JCE - the Joomla Content Editor.

This content is placed within a paragraph with the class add. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class and. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class blank. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class cart. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class chat. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class chatsingle. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class checkbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class dot. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class finger. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class flower. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class flower2. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class footprint. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class head. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class info. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class mail. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class page. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class palmtree. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class pen. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class people. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class person. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class question. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class refresh. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class rightArrow. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class rightArrow2. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class scissors. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class spiral. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class star1. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class star2. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class sun1. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class sun2. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class tick. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class tickbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class tools. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a paragraph with the class triangle. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.