Typography Page

This is how your H1 heading may look like

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem.

This is how your H2 heading may look like

Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio.

This is how your H3 heading may look like

Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio.

This is how your H4 heading may look like

Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio.

This is how your H5 heading may look like

Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio.

This is how your H6 heading may look like

Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio.

Image aligned left & right

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus. Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et.
Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat lacinia fermentum. Donec in velit vel ipsum auctor pulvinar. Proin ullamcorper urna et felis.

<div class="wrapper">
	<figure class="fleft">
		<a href="images/example-img.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/img1.jpg" alt=""></a>
	</figure>
	Simple text ...
</div>
  1. Create a code section like this: 
    <figure>
	<a href="images/example-img.jpg">
		<img src="images/img1.jpg" alt="">
	</a>
</figure>
  2. The href attribute should contain the path to the large image.
  3. Additionally you can add lightbox-image class and rel="prettyphoto" title="Example 1" attributes in ordr to add a lightbox.

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus. Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et.
Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat lacinia fermentum. Donec in velit vel ipsum auctor pulvinar. Proin ullamcorper urna et felis.

<div class="wrapper">
	<figure class="fright">
		<a href="images/example-img.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/img1.jpg" alt=""></a>
	</figure>
	Simple text ...
</div>
  1. Create a code section like this: 
    <figure class="fright">
	<a href="images/example-img.jpg" ><img src="images/img1.jpg" alt=""></a>
</figure>
  2. The href attribute should contain the path to the large image.
  3. Additionally you can add lightbox-image class and rel="prettyphoto" title="Example 1" attributes in ordr to add a lightbox.

Image with caption

Caption

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis partu- rient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus. Quisque nulla. Vestibulum libero nisl, porta vel, sceleri- sque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nu- lla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et.
Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat lacinia fermentum. Donec in velit vel ipsum auctor pulvinar. Proin ullamcorper urna et felis.

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. 

<div class="wrapper">
	  <figure>
	    <a href="images/example-img.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/img1.jpg" alt=""></a>
	    <figcaption>Caption</figcaption>
	  </figure>
	  Simple text ...
</div>
  1. Create a code section like this: 
    < figure >
	< a href="images/example-img.jpg" > < img src="images/img1.jpg" alt="" > < /a >
	< figcaption > Caption < / figcaption >
< /figure >
  2. The href attribute should contain the path to the large image.
  3. In order to add image description you will need to use <figcaption> tag.
  4. Additionally you can add lightbox-image class and rel="prettyphoto" title="Example 1" attributes in ordr to add a lightbox.
TOP

Dropcap

APraest vestibum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta sit amet eros.
Morbi nc odio gr at cursus ne, luctus a, lorem. Maecenas tristiq orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros.
BPraest vestibum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta sit amet eros. Morbi nc odio gr at cursus ne.
Mcenas tristiq orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. 
<span class="dropcap_1">R</span>orem ipsum adipiscing...
Add the <span> tag around the first letter and add dropcap_1, dropcap_2 classes to this tag.
TOP

Dropcap & Pullquotes

APraest vestibum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Integer rutrum eu lacus.
Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo.
Morbi nc odio gr at cursus ne, luctus a, lorem. Maecenas tristiq orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus. Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et. Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue.
Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede. Donec eget tellus non erat lacinia fermentum. Donec in velit vel ipsum auctor pulvinar.
Aen nec eros. Vetibulum ante i primis in faucibus orci luctus et ultrices.
Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna.
Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus. Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. 
<blockquote class="right">Suspendisse semper bibendum...</blockquote>
Add the <blockquote> tag around the text and add left, right classes to this tag.
TOP

Table styling

This is a simple table with 5 columns, 5 rows and a caption.

Header 1 Header 2 Header 3 Header 4 Header 5
Division 1 Division 2 Division 3 Division 4 Division 5
Division 1 Division 2 Division 3 Division 4 Division 5
Division 1 Division 2 Division 3 Division 4 Division 5
Division 1 Division 2 Division 3 Division 4 Division 5
Division 1 Division 2 Division 3 Division 4 Division 5
TOP

Other elements styling

  • <abbr> </abbr> This is abbreviation
  • <strong> </strong> This is strong
  • <em> </em> This is emphasis
  • <b> </b> This is bold text
  • <i> </i> This is italic text
  • <cite> </cite> This is cite
  • <small> </small> This is small text
  • <big> </big> This is big text
  • <del> </del> This is deleted text
  • <ins> </ins> This is inserted text
  • <dfn> </dfn> This is defining instance
  • <kbd> </kbd> This is user input
  • <samp> </samp> This is sample output
  • <q> </q> This is "inline quotation"
  • <sup> </sup> This is superscript
  • <sub> </sub> This is subscript
  • <var> </var> This is a variable
TOP

Button links

Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros.

More More any button may be longer More 

<a href="#" class="button"><span><span>Learn more</span></span></a>
<a href="#" class="button2"><span><span>Learn more</span></span></a>
<a href="#" class="link1">Learn more</a>
  1. Create a common HTML link <a href="#"></a>.
  2. Add link_1 class (class="link_1").
  3. You may add additional classes (button, button2 with <span><span> </span></span>) in order to change the button appearance.
TOP

Styling Lists

<ul class="list1">
	<li>Sample text</li>
	<li>Sample text</li>
	<li><a href="#">Sample text</a>
		<ul>
			<li>Sample text</li>
			<li>Sample text</li>
		</ul>
	</li>
</ul>
	
<ol>
	<li><a href="#">Sample text</a></li>
	<li><a href="#">Sample text</a></li>
	<li><a href="#">Sample text</a></li>
</ol>
TOP

A definition list

A definition term

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem.

A definition term

Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.

TOP

Quotation

Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros.

Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla.

Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. 

<p class="quote">Suspendisse semper bibendum...</p>
TOP

Box styles

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicu-

<div class="boxes">
	<p class="img_1">Vestibulum at aliquet est...</p>
</div>

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicu-

<div class="boxes">
	<p class="img_2">Vestibulum at aliquet est...</p>
</div>

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicu-

<div class="boxes">
	<p class="img_3">Vestibulum at aliquet est...</p>
</div>

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicu-

<div class="boxes">
	<p class="img_4">Vestibulum at aliquet est...</p>
</div>
TOP