Typography sets the tone of a website. When used correctly it creates hierarchy and order on your pages. Below is an overview of the different stylings and the HTML code to display them. It also showcases several available classes that can be used in special occassions.

How to use this typography in my website?

Headers

H1 header example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula feugiat tincidunt. Integer tristique luctus sodales.

H2 header example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula feugiat tincidunt. Integer tristique luctus sodales.

H3 header example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula feugiat tincidunt. Integer tristique luctus sodales.

H4 header example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula feugiat tincidunt. Integer tristique luctus sodales.

H5 header example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula feugiat tincidunt. Integer tristique luctus sodales.

H6 header example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula feugiat tincidunt. Integer tristique luctus sodales.

This is a sample paragraph

<div class="tp-title1">Title 1 example</div>
<p class="tp-paragraph1">This is a sample paragraph</p>

This is a sample paragraph

<div class="tp-title2">Title 2 example</div>
<p class="tp-paragraph2">This is a sample paragraph</p>

This is a sample paragraph

<div class="tp-title3">Title 3 example</div>
<p class="tp-paragraph3">This is a sample paragraph</p>

This is a sample paragraph

<div class="tp-title4">Title 4 example</div>
<p class="tp-paragraph4">This is a sample paragraph</p>

Blockquote & dropcap examples

This is a basic blockquote
<blockquote>Your content here</blockquote>

This is a blockquote with the class="quotecolor"
<blockquote class="quotecolor"><div class="color">Your content here</div></blockquote>

This is a dropcap example.
<p class="dropcap"><span class="dropcap">Y</span>our content here</p>

Lists

Icon styles

Warning, Information and Success styles

<p class="block-warning">Your content here</p>

<p class="block-information">Your content here</p>

<p class="block-success">Your content here</p>

Code Examples

pre {
    This is the default pre
    <pre>Your content here</pre>
}

pre {
    This is a pre tag with the class="pre-black"
    <pre class="pre-black">Your content here</pre>
}

Image styles

<span class="tp-img1"><img src="/evalor/[your image]" alt="[Your caption]" /></span>

Gives images a white border surrounded by a light grey one. Shows your alt text when you hover.

<img class="tp-img2" src="/evalor/[your image]" />

Uses the box highlight color in combination with the module-title pattern.

<img class="tp-img3" src="/evalor/[your image]" />

Gives images a 4 pixel white border surrounded by a 1 pixel light grey one. The white border gets darker on hover.

<img class="tp-img4" src="/evalor/[your image]" />

Gives images small rounded corners on CSS3 browsers.

<img class="tp-img5" src="/evalor/[your image]" />

Gives images a 5 pixel white border.

Boxes

Buttons & Links

<a class="blackbutton"><span>Button text</span></a>

<a class="whitebutton"><span>Button text</span></a>

<a class="colorbutton0"><span>Button text</span></a>
(colorbutton0 uses the highlight-color of the boxes)

<a class="colorbutton1"><span>Button text</span></a>
(colorbutton1 uses the background-color of the header)

<a class="colorbutton2"><span>Button text</span></a>
(colorbutton2 uses the background-color of the footer)

<a class="colorbutton0 bigbutton"><span>Big Button</span></a>
(colorbutton0 uses the highlight-color of the boxes)

Useful styles

class="wrap.."

When applied to a div the element will float left and get a percentage width (10%, 15%, 20% etc.)
Available classes are: wrap10, wrap15, wrap20, wrap25, wrap33, wrap50, wrap66, wrap75, wrap80, wrap85, wrap90

class="floatLeft"

When applied to any element the element will float left and gets a right-margin of 15px

class="floatRight"

When applied to any element the element will float right and gets a left-margin of 15px

class="noTopMargin"

When applied to any element the element will lose it's top margin

class="noBottomMargin"

When applied to any element the element will lose it's bottom margin

class="topMargin"

When applied to any element the element will get a top-margin of 10px

class="topMargin20px"

When applied to any element the element will get a top-margin of 20px

class="topMargin30px"

When applied to any element the element will get a top-margin of 30px

class="bottomMargin"

When applied to any element the element will get a bottom-margin of 10px

class="bottomMargin20px"

When applied to any element the element will get a bottom-margin of 20px

class="bottomMargin30px"

When applied to any element the element will get a bottom-margin of 30px

class="noMargin"

When applied to any element the element will have no margins

class="noPadding"

When applied to any element the element will have no padding

Tables

This is a table with the classes: zebra table-key

This is a default table

This is a table with the classes: zebra highlight table-chart

When you want to use tables for layout elements you can use <table class="no-fx">

Forms

To add typography styles to your website, you'll have to enter HTML mode. This can be done by clicking on the button (TinyMCE) or the button (JCE).

If you are using the TinyMCE editor, go to Extensions > Plugin Manager > Editor - TinyMCE > Set Code Clean-up on Save to Never.