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="btn small"
Mediumclass="btn medium"
Largeclass="btn large"
class="btn prev"
class="btn next"
Default<a class="btn"> </a>
Successclass="btn success"
Warningclass="btn warning"
Dangerclass="btn danger"
Infoclass="btn inf"
<ul class="pages">
	<li><a href="" class="btn prev"><span></span></a></li>
	<li class="current"><a href="" class="btn page">1</a></li>
	...
	<li><a href="" class="btn 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="btn sign-in"
Sign Outclass="btn sign-out"
Site Mapclass="btn site-map"
Commentclass="btn comment"
Refreshclass="btn refresh"
Printclass="btn print2"
Commentclass="btn comment2 inf"
Calendarclass="btn calend warning"
Printclass="btn print success"
Bookmarkclass="btn bookmark danger"
Downloadclass="btn dwload inf"
Settingsclass="btn settings success"

Breadcrumbs

Description

Breadcrumbs Style 1

<ul id="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="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="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

Description

Ordered List

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

Ordered List 2

<ol class="list3">
	<li> <a href=""> ... </a> </li>
	<li> ... </li>
	...
</ol>

Unordered List 1

<ul class="list1">
	<li> <a href=""> ... </a> </li>
	<li> ... </li>
	...
</ul>

Unordered List 2

<ul class="list2">
	<li> <a href=""> ... </a> </li>
	<li> ... </li>
	...
</ul>

Mixed List

<ol>
	<li> <a href=""> ... </a> </li>
	<li>
		<ul class="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="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="table 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="table 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="table table-bordered table-striped2">
	<thead>
		<tr>
			<th> ... </th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td> ...</td>
			...
		</tr>
	</tbody>
</table>

Forms

Simple Form

Male
Female

Sign me up for your newsletter

Advanced Form

Male
Female
Sign me up for your newsletter

Contacts Form

Contact form submitted! We will be in touch soon.
Description

Simple Form

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

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

To create select box use the following code:

<label>
	<span class="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="wrapper"><input type="radio" name="group1"><div class="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="wrapper"><input type="checkbox"><div class="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="form1">
	<label><span class="text-form">First Name:</span><input type="text"></label>
	...
	<label>
		<span class="text-form fleft">Country:</span>
		<select>
			<option>United States</option>
			<option>United States</option>
		</select>
	</label>
	<label>
		<div class="text-form">Message:</div>
		<textarea></textarea>
	</label>
	<div class="wrapper"><input type="radio" name="group1"><div class="text-form2 fleft">Male</div></div>
	<div class="wrapper"><input type="radio" name="group1"><div class="text-form2 fleft">Female</div></div>
	<div class="wrapper"><input type="checkbox"><div class="text-form3 fleft">Sign me up for your newsletter</div></div>
	<a class="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 "form2"

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

Contacts 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

<form id="search">
	<input type="text">
	<a class="btn">Search</a>
</form>

Subscribe Form

<form id="subscribe">
	<input type="text">
	<a class="btn">Subscribe</a>
</form>

Log In Form

<form id="log_in">
	<input type="text">
	<input type="password">
	<a class="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>
	<!-- insert text here -->
</blockquote>
“Lorem ipsum dolor amet consectetu adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris...”
Description
<div class="quotes_2">
	<blockquote>
	<!-- insert text here -->
	</blockquote>
	<span></span>
</div>
<div class="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="quotes_3">
	<!-- insert text here -->
	<img src="images/quote-br.gif" alt=""><br>
	<a href="">Link Text</a>
</blockquote>

Information blocks

Default
<span class="info"> insert text here </span>
Success
<span class="info info_success"> insert text here </span>
Warning
<span class="info info_warning"> insert text here </span>
Important
<span class="info info_important"> insert text here </span>
Info
<span class="info info_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>