Typography is a fundamental part of a template, providing you with the tools to characterise your content and bring it to life. There is a vast array of typography available with Fresco template, as is with our previous releases, from list styles, notice blocks and a diverse number of other elements.

<p> Notice Styles

This is a sample of the Approved style. To replicate, use the following syntax: <p class=”approved”>….</p> (HTML) or [notice class=”approved”] … [/notice] (SHORTCODE).

This is a sample of the Attention style. To replicate, use the following syntax: <p class=”attention”>….</p> (HTML) or [notice class=”attention”] … [/notice] (SHORTCODE).

This is a sample of the Notice style. To replicate, use the following syntax: <p class=”notice”>….</p> (HTML) or [notice class=”notice”] … [/notice] (SHORTCODE).

This is a sample of the Alert style. To replicate, use the following syntax: <p class=”alert”>….</p> (HTML) or [notice class=”alert”] … [/notice] (SHORTCODE).

<span> Text Icon Styles

To replicate, the following format: <span class=”text-icon iconname”>…</span> (HTML) or [icon class="icon name"]…[/icon] (SHORTCODE). The class names are listed below, such as “text-icon email“.

Text with an email icon

Text with a phone icon

Text with a quote icon

Text with a cart icon

Text with a rss icon

Text with a tags icon

Text with a write icon

Text with an info icon

Text with a sound icon

Text with a rightarrow icon

Text with a leftarrow icon

Text with a circlearrow icon

Text with a downarrow icon

Text with an uparrow icon

Text with a person icon

Text with a calendar icon

Text with a doc icon

Text with a bulb icon

Text with a twitter icon

Text with a youtube icon

Text with a skype icon

Text with a facebook icon

Text with a like icon

Text with a video icon

Text with a dropbox icon

Text with a vimeo icon

Text with a paypal icon

<em> Emphasis Styles

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="italic">…</em> (HTML) or [emphasis]…[/emphasis] (SHORTCODE)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold">…</em> (HTML) or [emphasisbold]…[/emphasisbold] (SHORTCODE)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="bold2">…</em> (HTML) or [emphasisbold2]…[/emphasisbold2] (SHORTCODE)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight">…</em> (HTML) or [highlight class="default"]…[/highlight] (SHORTCODE)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight white">…</em> (HTML) or [highlight class="white"]…[/highlight] (SHORTCODE)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight black">…</em> (HTML) or [highlight class="black"]…[/highlight] (SHORTCODE)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight green">…</em> (HTML) or [highlight class="green"]…[/highlight] (SHORTCODE)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight yellow">…</em> (HTML) or [highlight class="yellow"]…[/highlight] (SHORTCODE)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight blue">…</em> (HTML) or [highlight class="blue"]…[/highlight] (SHORTCODE)

This is a emphasis tag that allows you to highlight words or phrases. Use the following format: <em class="highlight red">…</em> (HTML) or [highlight class="red"]…[/highlight] (SHORTCODE)

<ul> List Styles (Icons)

To replicate, use the following format: <ul class=”list-icon icon_name”><li>….</li><li>….</li>…</ul> (HTML) or [list class=”list-icon icon_name”][li]….[/li][li….[/li][/list] (SHORTCODE). The icon names are listed below, such as “cart“.

A list item using the list-icon email class.

A list item using the list-icon email class.

A list item using the list-icon phone class.

A list item using the list-icon phone class.

A list item using the list-icon quote class.

A list item using the list-icon quote class.

A list item using the list-icon twitter class.

A list item using the list-icon twitter class.

A list item using the list-icon youtube class.

A list item using the list-icon youtube class.

A list item using the list-icon facebook class.

A list item using the list-icon facebook class.

A list item using the list-icon cart class.

A list item using the list-icon cart class.

A list item using the list-icon tags class.

A list item using the list-icon tags class.

A list item using the list-icon write class.

A list item using the list-icon write class.

A list item using the list-icon info class.

A list item using the list-icon info class.

A list item using the list-icon sound class.

A list item using the list-icon sound class.

A list item using the list-icon rightarrow class.

A list item using the list-icon rightarrow class.

A list item using the list-icon skype class.

A list item using the list-icon skype class.

A list item using the list-icon rss class.

A list item using the list-icon rss class.

A list item using the list-icon leftarrow class.

A list item using the list-icon leftarrow class.

A list item using the list-icon circlearrow class.

A list item using the list-icon circlearrow class.

A list item using the list-icon dropbox class.

A list item using the list-icon dropbox class.

A list item using the list-icon vimeo class.

A list item using the list-icon vimeo class.

A list item using the list-icon downarrow class.

A list item using the list-icon downarrow class.

A list item using the list-icon video class.

A list item using the list-icon video class.

A list item using the list-icon like class.

A list item using the list-icon like class.

A list item using the list-icon uparrow class.

A list item using the list-icon uparrow class.

A list item using the list-icon person class.

A list item using the list-icon person class.

A list item using the list-icon calendar class.

A list item using the list-icon calendar class.

A list item using the list-icon bulb class.

A list item using the list-icon bulb class.

A list item using the list-icon paypal class.

A list item using the list-icon paypal class.

A list item using the list-icon doc class.

A list item using the list-icon doc class.

<ul> List Styles (CSS3)

These list styles are based on the latest CSS3 techniques and are designed to work in modern browsers (will not display properly in IE6-IE8).

To replicate, use the following format: <ul class=”class name”><li>….</li><li>….</li>…</ul> (HTML) or [list class="class name"][li]….[/li][li….[/li][/list] (SHORTCODE). The class names are listed below, such as “checkmark red“.