Typography

Strata comes with some simple headings and colour options to support the text of your site. You can see all of the classes associated with the template below.

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 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.

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

This is a code snippet if you want to highlight some text or code snippet. Just use the code class like this <p class="code">Insert your code here.</p>

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 "save" 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 "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 "support" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

List Styles

The following are some handy links styles to apply to your links. You can apply the class to the list element like this: <li class="functionstyle">List item</li> or to the whole unordered list like this: <ul class="functionstyle"><li>My list item</li></ul>.

• A list with the class attachment. To use this style use the following html <li class="attachment">My list item</li>
• A list with the class calculator.To use this style use the following html <li class="calculator">My list item</li>
• A list with the class dvd.To use this style use the following html <li class="dvd">My list item</li>
• A list with the class cut.To use this style use the following html <li class="cutt">My list item</li>
• A list with the class dollar. To use this style use the following html <li class="dollar">My list item</li>
• A list with the class edit. To use this style use the following html <li class="edit">My list item</li>
• A list with the class euro. To use this style use the following html <li class="euro">My list item</li>
• A list with the class pound. To use this style use the following html <li class="pound">My list item</li>
• A list with the class home. To use this style use the following html <li class="home">My list item</li>
• A list with the class sale. To use this style use the following html <li class="sale">My list item</li>
• A list with the class save. To use this style use the following html <li class="save">My list item</li>
• A list with the class sound. To use this style use the following html <li class="sound">My list item</li>
• A list with the class support. To use this style use the following html <li class="support">My list item</li>