Typography

Make your website more fun by using our custom

Avori Typography

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?

H1 header example

H2 header example

H3 header example

H4 header example

H5 header example

H6 header example

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 styles

Styled unordered lists

Icon styles

Styled Ordered lists

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

Image class 1

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

Image class 2

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

Image class 3

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

Box examples

Buttons and links

Buttons

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

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

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

Useful styles

class="wrap.."

When applied to any element 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 10px

class="floatRight"

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

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="bottomMargin"

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

Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut elit est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec metus sed massa dapibus pellentesque. Quisque rutrum eleifend urna, ac consectetur leo tincidunt nec. Proin purus odio, convallis vitae tristique vitae, sollicitudin in nibh. Proin cursus, nulla quis sodales pellentesque, ipsum nulla molestie felis, ut adipiscing quam sem quis nisl. Nulla facilisi.

<a class="floatLeft wrap50 colorbutton rounded"><span>Your content here</div></div>

Donec vulputate ipsum vitae eros vulputate ac hendrerit turpis tempor. Mauris rhoncus malesuada augue eget posuere. Pellentesque condimentum ante ac sem euismod facilisis. Sed quis turpis ut risus viverra posuere ut a mauris. Integer quis massa lectus. Aliquam quam leo, ultrices eget convallis at, vulputate nec magna. Fusce urna neque, suscipit congue gravida sit amet, tempus sed lorem. Vestibulum venenatis aliquam ullamcorper. Mauris quam ipsum, convallis non elementum at, consequat ultrices ligula. Etiam interdum erat vitae tortor ornare accumsan. Integer interdum rutrum erat at sodales.

Sample 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

Sample form tags

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.