Typography

Canvas comes loaded with some great looking typography for you to use in your content. We have gone above and beyond the call of duty to provide you with a staggering 60+ typographical styles (not including the standard Heading tags) for you to use in your content. The bulk of them are simple paragraph and div blocks that use the aptly named Distortion set of icons from Dry 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

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph with the firs 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.

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 an unordered list placed inside a div that has the class "left45" assigned to it:

Donec imperdiet ipsum eu mauris.
Morbi facilisis purus in dui.
Donec pharetra orci eu justo.
Donec porta tellus id leo.
Aenean commodo sagittis orci.

This is an ordered list placed inside a div that has a class "right45 whitebox" assigned to it:

Donec imperdiet ipsum eu mauris.
Morbi facilisis purus in dui.
Donec pharetra orci eu justo.
Donec porta tellus id leo.
Aenean commodo sagittis orci.

This is a div that has the class "clear" assigned to it, while the line shown below is a paragraph or p tag with the "line" class assigned to it.

The following are simple colour stylings for divs and paragraphs.

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

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

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

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

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

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

This content is placed within a div 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.

This is some underlined text.

The icons used below have been created by the good folk at Dry Icons and are licensed for your use.

This is a code snippet if you want to highlight some text or code snippet.

This is a paragraph with the "new" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "attachment" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "calculator" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "cut" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "dollar" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "euro" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "pound" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "contact" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "sale" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "comment" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "user" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "users" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "warning" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "rss" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "download" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

Some more stylings ...

This is a paragraph with the "sound" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "headphone" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "iphone" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "heart" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "font" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "key" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "link" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "lock" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "mail" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "case" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "support" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "folder" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "computer" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

A few more ...

This is a paragraph with the "home" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "info" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "ipod" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "phone" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "camera" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "print" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "process" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "promotion" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "refresh" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "search" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "tag" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "date" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

Here are the list classes available in the Canvas template:

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 white 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 blue
This is a span with the class blue
This is a span with the class blue

Side Menu