Articles

Template Typography

Creating Beautiful Content With Simple Code

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 the template, as is with our previous releases, from list styles, notice blocks and a diverse number of other elements.

<h1> Heading Styles

H1. Heading 1

H2. Heading 2

H3. Heading 3

H4. Heading 4

H5. Heading 5

H1. Page Title

H1. Content Title

<ul> List Styles

  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
  • This is an example of a standard list style. Lorem ipsum dolor sit amet, consecetur adipiscing elit. Donec sit amet nibh.
 

<p> DropCap Styles

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibu. Pellentesque vel enim urna, sit amet blandit ipsum. Maecenas quis sem sit amet nunc pretium mattis. Sed dapibus semper est, sed pretium erat.

Use the following format: <p class="dropcap">...</p> (HTML) or [dropcap class="dropcap"]...[/dropcap] (ROKCANDY). You can use any letter, symbol or number.

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap2">...</p> (HTML) or [dropcap class="dropcap2"] ... [/dropcap] (ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap3">...</p> (HTML) or [dropcap class="dropcap3"] ... [/dropcap] (ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap4">...</p> (HTML) or [dropcap class="dropcap4"] ... [/dropcap] (ROKCANDY)

Praesent rutrum sapien ac felis. Use this format: <p class="dropcap5">...</p> (HTML) or [dropcap class="dropcap5"] ... [/dropcap] (ROKCANDY)

<blockquote> Styles

To replicate, use the following formatting: <blockquote><p>....</p></blockquote> (HTML) or [blockquote class="default"]...[/blockquote] (ROKCANDY).


Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

To replicate, use the following formatting: <blockquote class="alignleft"><p>....</p></blockquote> (HTML) or [blockquote class="alignleft"]...[/blockquote] (ROKCANDY).

Lorem ipsum dolor sit amet, consecetur adipiscing elit. Mauris metus tortor.


Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

To replicate, use the following formatting: <blockquote class="alignright"><p>....</p></blockquote> (HTML) or [blockquote class="alignright"]...[/blockquote] (ROKCANDY).

Lorem ipsum dolor sit amet, consecetur adipiscing elit. Mauris metus tortor.

 

<pre> Code Styles

This is a sample <pre class="lines">...</pre> (HTML) or,
[pre2 class="{lines}"] ... [/pre2] (ROKCANDY) tag:

div.modulebox-black div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.modulebox-black div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}
This is a sample <pre>...</pre> (HTML) or,
[pre class="{lines}"] ... [/pre] (ROKCANDY) tag:

div.modulebox-black div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.modulebox-black div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}

<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] (ROKCANDY).

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

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

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

 

<span> Text Icon

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



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 youtube icon

Text with a skype 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] (ROKCANDY)

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] (ROKCANDY)

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] (ROKCANDY)

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] (ROKCANDY)

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] (ROKCANDY)

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] (ROKCANDY)

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] (ROKCANDY)

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] (ROKCANDY)

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] (ROKCANDY)

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] (ROKCANDY)

 

Font Awesome Icons

Font Awesome is a pictographic language of web-related actions which delivers 220 icons. The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0 and you can find the full examples of usage at Font Awesome - http://fortawesome.github.com/Font-Awesome

To replicate, use the following format: <span class="icon-name"></span> or [span class="icon-name"]...[/span] (ROKCANDY). The icons name are listed below, such as "icon-signal".

Web Icons

icon-adjust

icon-asterisk

icon-ban-circle

icon-bar-chart

icon-barcode

icon-beaker

icon-bell

icon-bolt

icon-book

icon-bookmark

icon-bookmark-empty

icon-briefcase

icon-bullhorn

icon-calendar

icon-camera

icon-camera-retro

icon-certificate

icon-check

icon-check-empty

icon-cloud

icon-cog

icon-cogs

icon-comment

icon-comment-alt

icon-comments

icon-comments-alt

icon-credit-card

icon-dashboard

icon-download

icon-download-alt

icon-edit

icon-envelope

icon-envelope-alt

icon-exclamation-sign

icon-external-link

icon-eye-close

icon-eye-open

icon-facetime-video

icon-film

icon-filter

icon-fire

icon-flag

icon-folder-close

icon-folder-open

icon-gift

icon-glass

icon-globe

icon-group

icon-hdd

icon-headphones

icon-heart

icon-heart-empty

icon-home

icon-inbox

icon-info-sign

icon-key

icon-leaf

icon-legal

icon-lemon

icon-lock

icon-unlock

icon-magic

icon-magnet

icon-map-marker

icon-minus

icon-minus-sign

icon-money

icon-move

icon-music

icon-off

icon-ok

icon-ok-circle

icon-ok-sign

icon-pencil

icon-picture

icon-plane

icon-plus

icon-plus-sign

icon-print

icon-pushpin

icon-qrcode

icon-question-sign

icon-random

icon-refresh

icon-remove

icon-remove-circle

icon-remove-sign

icon-reorder

icon-resize-horizontal

icon-resize-vertical

icon-retweet

icon-road

icon-rss

icon-screenshot

icon-search

icon-share

icon-share-alt

icon-shopping-cart

icon-signal



icon-signout

icon-sitemap

icon-sort

icon-sort-down

icon-sort-up

icon-star

icon-star-empty

icon-star-half

icon-tag

icon-tags

icon-tasks

icon-thumbs-down

icon-thumbs-up

icon-time

icon-tint

icon-trash

icon-trophy

icon-truck

icon-umbrella

icon-upload

icon-upload-alt

icon-user

icon-user-md

icon-volume-off

icon-volume-down

icon-volume-up

icon-warning-sign

icon-wrench

icon-zoom-in

icon-zoom-out

Text Editor Icons

icon-file

icon-cut

icon-copy

icon-paste

icon-save

icon-undo

icon-repeat

icon-paper-clip

icon-text-height

icon-text-width

icon-align-left

icon-align-center

icon-align-right

icon-align-justify

icon-indent-left

icon-indent-right

icon-font

icon-bold

icon-italic

icon-strikethrough

icon-underline

icon-link

icon-columns

icon-table

icon-th-large

icon-th

icon-th-list

icon-list

icon-list-ol

icon-list-ul

icon-list-alt

Directional Icons

icon-arrow-down

icon-arrow-left

icon-arrow-right

icon-arrow-up

icon-chevron-down

icon-circle-arrow-down

icon-circle-arrow-left

icon-circle-arrow-right

icon-circle-arrow-up

icon-chevron-left

icon-caret-down

icon-caret-left

icon-caret-right

icon-caret-up

icon-chevron-right

icon-hand-down

icon-hand-left

icon-hand-right

icon-hand-up

icon-chevron-up

Video Player Icons

icon-play-circle

icon-play

icon-pause

icon-stop

icon-step-backward

icon-fast-backward

icon-backward

icon-forward

icon-fast-forward

icon-step-forward

icon-eject

icon-fullscreen

icon-resize-full

icon-resize-small

Social Icons

icon-phone

icon-phone-sign

icon-facebook

icon-facebook-sign

icon-twitter

icon-twitter-sign

icon-github

icon-github-sign

icon-linkedin

icon-linkedin-sign

icon-pinterest

icon-pinterest-sign

icon-google-plus

icon-google-plus-sign

icon-sign-blank

 

<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] (ROKCANDY). The icon names are listed below, such as "cart".


  • 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 youtube class.
  • A list item using the list-icon youtube 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 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] (ROKCANDY). The class names are listed below, such as "checkmark red".

  • checkmark
  • checkmark
  • circle-checkmark
  • circle-checkmark
  • square-checkmark
  • square-checkmark
  • checkmark green
  • checkmark green
  • checkmark yellow
  • checkmark yellow
  • checkmark red
  • checkmark red
  • checkmark blue
  • checkmark blue
  • checkmark white
  • checkmark white
  • triangle-small
  • triangle-small
  • triangle
  • triangle
  • triangle-large
  • triangle-large
  • triangle green
  • triangle green
  • triangle yellow
  • triangle yellow
  • triangle red
  • triangle red
  • triangle blue
  • triangle blue
  • triangle white
  • triangle white
  • circle-small
  • circle-small
  • circle
  • circle
  • circle-large
  • circle-large
  • circle green
  • circle green
  • circle yellow
  • circle yellow
  • circle red
  • circle red
  • circle blue
  • circle blue
  • circle white
  • circle white
 

<span> Inset Styles

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Right TitleYou will need to use the following formatting: <span class="inset-right"> <span class="inset-right-title"> .... </span> ... some content ... </strong> (HTML) or [inset side="right" title="Inset Right Title"] ... some content ...[/inset] (ROKCANDY) Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inset Left TitleYou will need to use the following formatting: <span class="inset-left"> <span class="inset-left-title"> .... </span> ... some content ... </strong> (HTML) or [inset side="left" title="Inset Left Title"] ... some content ...[/inset] (ROKCANDY) Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.