Typography Page

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Other elements styling

This is abbreviation<abbr> </abbr>
This is strong 
This is emphasis 
This is bold text 
This is italic text 
This is cite<cite> </cite>
This is small text 
This is ~~deleted text~~<del> </del>

This is inserted text<ins> </ins>
This is defining instance<dfn> </dfn>
This is user input<kbd> </kbd>
This is sample output<samp> </samp>
This is “inline quotation”<q> </q>
This is ^superscript 
This is _subscript 
This is a variable<var> </var>

Buttons

Add desired class to the <a> tag (<a href="#" class=""> Button Text </a>)

Smallclass="pro_btn pro_small"

Mediumclass="pro_btn pro_medium"

Largeclass="pro_btn pro_large"

PreviousNext

class="pro_btn pro_prev"
class="pro_btn pro_next"

Default<a class="pro_btn"> </a>

Successclass="pro_btn pro_success"

Warningclass="pro_btn pro_warning"

Dangerclass="pro_btn pro_danger"

Infoclass="pro_btn pro_inf"

<ul class="pro_pages"><li><a href="#" class="pro_btn pro_prev"><span></span></a></li><li class="current"><a href="#" class="pro_btn pro_page">1</a></li>...<li><a href="#" class="pro_btn pro_next"><span></span></a></li></ul>

Add desired class to the <a> tag with  tag inside (<a href="#" class=""> Button Text </a>)

Sign Outclass="pro_btn pro_sign-out"

Site Mapclass="pro_btn pro_site-map"

Commentclass="pro_btn pro_comment"

Refreshclass="pro_btn pro_refresh"

Printclass="pro_btn pro_print2"

Commentclass="pro_btn pro_comment2 pro_inf"

Calendarclass="pro_btn pro_calend pro_warning"

Printclass="pro_btn pro_print pro_success"

Bookmarkclass="pro_btn pro_bookmark pro_danger"

Downloadclass="pro_btn pro_dwload pro_inf"

Settingsclass="pro_btn pro_settings pro_success"

Breadcrumbs

Description

Breadcrumbs Style 1

<ul id="pro_breadcrumbs-one"><li><a href="#"> 1 </a></li><li><a href="#"> 2 </a></li>...<li><a href="#" class="current"> You are here </a></li></ul>

Breadcrumbs Style 2

<ul id="pro_breadcrumbs-two"><li><a href="#"> 1 </a></li><li><a href="#"> 2 </a></li>...<li><a href="#" class="current"> You are here </a></li></ul>

Breadcrumbs Style 3

<ul id="pro_breadcrumbs-four"><li><a href="#"> 1 </a></li><li><a href="#"> 2 </a></li>...<li><a href="#" class="current"> You are here </a></li></ul>

Lists

Ordered List
Ordered List 2
Unordered List 1
Unordered List 2
Mixed List
Definition List
A definition term
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Cras ultricies, quam ac lobortis porta.
A definition term
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Cras ultricies, quam ac lobortis porta.

Description

Ordered List

<ol><li> <a href="#"> ... </a> </li><li> ... </li>...</ol>

Ordered List 2

<ol class="pro_list3"><li> <a href="#"> ... </a> </li><li> ... </li>...</ol>

Unordered List 1

<ul class="pro_list1"><li> <a href="#"> ... </a> </li><li> ... </li>...</ul>

Unordered List 2

<ul class="pro_list2"><li> <a href="#"> ... </a> </li><li> ... </li>...</ul>

Mixed List

<ol><li> <a href="#"> ... </a> </li><li><ul class="pro_list1"><li> ... </li></ul></li>...</ol>

Definition List

<dl><dt> <a href="#"> ... </a> </dt><dd> ... </dd><dt> <a href="#"> ... </a> </dt><dd> ... </dd>...</dl>

Tables

Default table

Header1	Header2	Header3	Header4	Header5	Header6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6

Description

<table class="pro_table"><thead><tr><th> ... </th>...</tr></thead><tbody><tr><td> ...</td>...</tr></tbody></table>

Striped table

Header1	Header2	Header3	Header4	Header5	Header6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6

Description

<table class="pro_table pro_table-striped"><thead><tr><th> ... </th>...</tr></thead><tbody><tr><td> ...</td>...</tr></tbody></table>

Bordered table

Header1	Header2	Header3	Header4	Header5	Header6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6

Description

<table class="pro_table pro_table-bordered"><thead><tr><th> ... </th>...</tr></thead><tbody><tr><td> ...</td>...</tr></tbody></table>

Combined table

Header1	Header2	Header3	Header4	Header5	Header6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6
Division 1	Division 2	Division 3	Division 4	Division 5	Division 6

Description

<table class="pro_table pro_table-bordered pro_table-striped2"><thead><tr><th> ... </th>...</tr></thead><tbody><tr><td> ...</td>...</tr></tbody></table>

Forms

Simple Form

Advanced Form

Contact Form

Contact form submitted! We will be in touch soon.

*This is not a valid name. *This field is required. *This is not a valid email address. *This field is required. *This is not a valid phone number. *This field is required. *The message is too short. *This field is required.

ClearSend

Description

Simple Form

To add new text field to the form duplicate the following code:

<label><span class="pro_text-form">First Name:</span><input type="text"></label>

To create select box use the following code:

<label><span class="pro_text-form">Country:</span><select><option>United States</option><option>United States</option></select></label>

To add new options to the select box use the tag "option": <option>Your Text</option>

To create multiple radio buttons use:

<div class="pro_wrapper"><input type="radio" name="group1"><div class="pro_text-form2 fleft">Yout Text</div></div>

Please note that all "input" tags with attribute type="radio" should have same name name="NameOfRadioGroup"

Checkbox can be created using the following code:

<div class="pro_wrapper"><input type="checkbox"><div class="pro_text-form3 fleft">Sign me up for your newsletter</div></div>

Any input tag can be displayed as checkbox. To do this type "checkbox" for the input tag type attribute (<input type="checkbox">)

This is an example of plain form, without any styles. Such elements as "select", "radio", "checkbox" will change appearance depending on your operating system.

<form id="pro_form1"><label><span class="pro_text-form">First Name:</span><input type="text"></label>...<label><span class="pro_text-form fleft">Country:</span><select><option>United States</option><option>United States</option></select></label><label><div class="pro_text-form">Message:</div><textarea></textarea></label><div class="pro_wrapper"><input type="radio" name="group1"><div class="pro_text-form2 fleft">Male</div></div><div class="pro_wrapper"><input type="radio" name="group1"><div class="pro_text-form2 fleft">Female</div></div><div class="pro_wrapper"><input type="checkbox"><div class="pro_text-form3 fleft">Sign me up for your newsletter</div></div><a class="pro_btn">Send</a></form>

Advanced Form

This form is styled using the jqTransform plugin. All form elements will be displayed identically in all browsers and operating systems. Adding new elements can be done the same way as for the simple form but note that form ID should be "pro_form2"

<form id="pro_form2"><label><span class="pro_text-form">First Name:</span><input type="text"></label>...<label><span class="pro_text-form fleft">Country:</span><select><option>United States</option><option>United States</option></select></label><label><div class="pro_text-form">Message:</div><textarea></textarea></label><div class="pro_wrapper"><input type="radio" name="group1"><div class="pro_text-form2 fleft">Male</div></div><div class="pro_wrapper"><input type="radio" name="group1"><div class="pro_text-form2 fleft">Female</div></div><div class="pro_wrapper"><input type="checkbox"><div class="pro_text-form3 fleft">Sign me up for your newsletter</div></div><a class="pro_btn">Send</a></form>

Contact Form

You can learn more about working with Contact Form in the Contact Form manual after the template purchase. Manual is located in the "documentation" folder of the template package.

Search Form

Subscribe Form

Log In Form

Description

Search Form

<form id="pro_search"><input type="text"><a class="pro_btn">Search</a></form>

Subscribe Form

<form id="pro_subscribe"><input type="text"><a class="pro_btn">Subscribe</a></form>

<form id="pro_log_in"><input type="text"><input type="password"><a class="pro_btn">Log In</a></form>

Blockquotes

Donec eget tellus non erat
Ut tellus dolor, dapibus eget, elemenm. Quis que nulla. Vestibulum libero nisl, porta velce lerisque eget, males uada at, neque. Vivmus eget nibh. Etiam cursue vel metus.
Jessica Priston

Description

<blockquote><!-- text --></blockquote>

“Lorem ipsum dolor amet consectetu adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris...”

Mark Johnson
President and CEO, R&D Services

Description

<div class="pro_quotes_2"> <blockquote> <!-- insert text here --> </blockquote> <span></span></div><div class="pro_quotes-links"><a href="#">Link Text</a></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Ut tellus dolor, dapibus eget, elemenm. Quis que nulla. Vestibulum libero nisl, porta velce lerisque eget, males uada at, neque. Vivmus eget nibh. Etiam cursue vel metus.
Jessica Priston

Description

<blockquote class="pro_quotes_3"><!-- insert text here --><img src="images/pro_images/quote-br.gif?d=accc75d33&m=1CCCF" alt=""><br><a href="#">Link Text</a></blockquote>

Information blocks

Default

<span class="pro_info"> insert text here </span>

Success

<span class="pro_info pro_info_success"> insert text here </span>

Warning

<span class="pro_info pro_info_warning"> insert text here </span>

Important

<span class="pro_info pro_info_important"> insert text here </span>

Info

<span class="pro_info pro_info_pro_info"> insert text here </span>

Address

8901 Marmora Road, Glasgow, D04 89GR.
Telephone: +1 959 603 6035
FAX: +1 504 889 9898
E-mail: mail@demolink.org

<address> insert text here </address>