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 <strong> </strong>
  • This is emphasis <em> </em>
  • This is bold text <b> </b>
  • This is italic text <i> </i>
  • This is cite <cite> </cite>
  • This is small text <small> </small>
  • 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 <sup> </sup>
  • This is subscript <sub> </sub>
  • 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 <span> tag inside (<a href="#" class=""><span></span> Button Text </a>)

class="pro_btn pro_sign-in"
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

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

Breadcrumbs Style 2

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

Breadcrumbs Style 3

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

Lists

Description

Ordered List

  1. <ol>
  2.     <li> <a href="#"> ... </a> </li>
  3.     <li> ... </li>
  4.     ...
  5. </ol>

Ordered List 2

  1. <ol class="pro_list3">
  2.     <li> <a href="#"> ... </a> </li>
  3.     <li> ... </li>
  4.     ...
  5. </ol>

Unordered List 1

  1. <ul class="pro_list1">
  2.     <li> <a href="#"> ... </a> </li>
  3.     <li> ... </li>
  4.     ...
  5. </ul>

Unordered List 2

  1. <ul class="pro_list2">
  2.     <li> <a href="#"> ... </a> </li>
  3.     <li> ... </li>
  4.     ...
  5. </ul>

Mixed List

  1. <ol>
  2.     <li> <a href="#"> ... </a> </li>
  3.     <li>
  4.         <ul class="pro_list1">
  5.             <li> ... </li>
  6.         </ul>
  7.     </li>
  8.     ...
  9. </ol>

Definition List

  1. <dl>
  2.     <dt> <a href="#"> ... </a> </dt>
  3.     <dd> ... </dd>
  4.     <dt> <a href="#"> ... </a> </dt>
  5.     <dd> ... </dd>
  6.     ...
  7. </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
  1. <table class="pro_table">
  2.     <thead>
  3.         <tr>
  4.             <th> ... </th>
  5.             ...
  6.         </tr>
  7.     </thead>
  8.     <tbody>
  9.         <tr>
  10.             <td> ...</td>
  11.             ...
  12.         </tr>
  13.     </tbody>
  14. </table>

Forms

Simple Form
Male
Female
Sign me up for your newsletter
Submit
Advanced Form
Male
Female
Sign me up for your newsletter
Submit
Contact Form
Contact form submitted! We will be in touch soon.
ClearSend
Description

Simple Form

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

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

To create select box use the following code:

  1. <label>
  2.     <span class="pro_text-form">Country:</span>
  3.     <select>
  4.         <option>United States</option>
  5.         <option>United States</option>
  6.     </select>
  7. </label>

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

To create multiple radio buttons use:

  1. <div class="pro_wrapper">
  2.     <input type="radio" name="group1"><div class="pro_text-form2 fleft">Yout Text</div>
  3. </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:

  1. <div class="pro_wrapper">
  2.     <input type="checkbox"><div class="pro_text-form3 fleft">Sign me up for your newsletter</div>
  3. </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.

  1. <form id="pro_form1">
  2.     <label><span class="pro_text-form">First Name:</span><input type="text"></label>
  3.     ...
  4.     <label>
  5.         <span class="pro_text-form fleft">Country:</span>
  6.         <select>
  7.             <option>United States</option>
  8.             <option>United States</option>
  9.         </select>
  10.     </label>
  11.     <label>
  12.         <div class="pro_text-form">Message:</div>
  13.         <textarea></textarea>
  14.     </label>
  15.     <div class="pro_wrapper">
  16.         <input type="radio" name="group1"><div class="pro_text-form2 fleft">Male</div>
  17.     </div>
  18.     <div class="pro_wrapper">
  19.         <input type="radio" name="group1"><div class="pro_text-form2 fleft">Female</div>
  20.     </div>
  21.     <div class="pro_wrapper">
  22.         <input type="checkbox"><div class="pro_text-form3 fleft">Sign me up for your newsletter</div>
  23.     </div>
  24.     <a class="pro_btn">Send</a>
  25. </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"

  1. <form id="pro_form2">
  2.     <label><span class="pro_text-form">First Name:</span><input type="text"></label>
  3.     ...
  4.     <label>
  5.         <span class="pro_text-form fleft">Country:</span>
  6.         <select>
  7.             <option>United States</option>
  8.             <option>United States</option>
  9.         </select>
  10.     </label>
  11.     <label>
  12.         <div class="pro_text-form">Message:</div>
  13.         <textarea></textarea>
  14.     </label>
  15.     <div class="pro_wrapper">
  16.         <input type="radio" name="group1"><div class="pro_text-form2 fleft">Male</div>
  17.     </div>
  18.         <div class="pro_wrapper">
  19.     <input type="radio" name="group1"><div class="pro_text-form2 fleft">Female</div>
  20.     </div>
  21.     <div class="pro_wrapper">
  22.         <input type="checkbox"><div class="pro_text-form3 fleft">Sign me up for your newsletter</div>
  23.     </div>
  24.     <a class="pro_btn">Send</a>
  25. </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
Subscribe
Log In Form
Log In
Description

Search Form

  1. <form id="pro_search">
  2.     <input type="text">
  3.     <a class="pro_btn">Search</a>
  4. </form>

Subscribe Form

  1. <form id="pro_subscribe">
  2.     <input type="text">
  3.     <a class="pro_btn">Subscribe</a>
  4. </form>

Log In Form

  1. <form id="pro_log_in">
  2.     <input type="text">
  3.     <input type="password">
  4.     <a class="pro_btn">Log In</a>
  5. </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
  1. <blockquote>
  2.     <!-- text -->
  3. </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
  1. <div class="pro_quotes_2">
  2.  <blockquote>
  3.  <!-- insert text here -->
  4.  </blockquote>
  5.  <span></span>
  6. </div>
  7. <div class="pro_quotes-links">
  8.     <a href="#">Link Text</a>
  9. </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
  1. <blockquote class="pro_quotes_3">
  2.     <!-- insert text here -->
  3.     <img src="images/pro_images/quote-br.gif" alt=""><br>
  4.     <a href="#">Link Text</a>
  5. </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>