Typography page

This is how your H1 heading may look like

Proin dictum elementum velit. Fusce euismod consequat ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor. Aliquam congue fermentum nisl. Mauris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, aliquam dapibus tincidunt.

This is how your H2 heading may look like

This is how your H3 heading may look like

This is how your H4 heading may look like

This is how your H5 heading may look like

This is how your H6 heading may look like

Image aligned left & right

Praesent vestibulum molestie lacus. Aenean nonummy hendret mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis nato 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 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 ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna.

Code
How it works

<div class="wrapper">
	<figure class="img-indent">
    	<a href="images/typography-slide1.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/page7-img1.jpg" alt=""></a>
	</figure>
	Simple text ...
</div>

Create a code section like this:

<figure class="img-indent">
<a href="images/typography-slide1.jpg">
    <img src="images/page7-img1.jpg" alt="">
</a>
</figure>

The href attribute should contain the path to the large image.
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 hendrer mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis nato 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 ferm dictum magna. Sed laoreet aliquam 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 ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna.

Code
How it works

<div class="wrapper">
    <figure class="img-indent-r">
    	<a href="images/typography-slide2.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/typography-img2.jpg" alt=""></a>
    </figure>
    Simple text ...
</div>

Create a code section like this:

<figure class="img-indent-r">
    <a href="images/typography-slide2.jpg" ><img src="images/typography-img2.jpg" alt=""></a>
</figure>

The href attribute should contain the path to the large image.
Additionally you can add lightbox-image class and rel="prettyphoto" title="Example 1" attributes in ordr to add a lightbox.

Image with caption

Code
How it works

<div class="wrapper">
  <figure class="img-indent">
    <a href="images/typography-slide3.jpg" class="lightbox-image" rel="prettyphoto" title="Example 1"><img src="images/typography-img3.jpg" alt=""></a>
    <figcaption>Caption</figcaption>
  </figure>
  Simple text ...
</div>

Create a code section like this:

< figure class="img-indent">
    < a href="images/typography-slide3.jpg" > < img src="images/typography-img3.jpg" alt="" > < /a >
    < figcaption > Caption < / figcaption >
< /figure >

The href attribute should contain the path to the large image.
In order to add image description you will need to use <figcaption> tag.
Additionally you can add lightbox-image class and rel="prettyphoto" title="Example 1" attributes in ordr to add a lightbox.

TOP

Dropcap

Acum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Duis ultri cies pharetra magna donec accumsan.

Dcum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat male odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lotristique orci ac sem. Duis ultricies pharetra magna.

Code
How it works

<span class="dropcap_1">R</span>orem ipsum adipiscing...

Add the  tag around the first letter and add dropcap_1, dropcap_2 classes to this tag.

TOP

Dropcap & Pullquotes

b raesent 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.

Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque.

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 tell 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, scelerisq e, 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. Ut pharetra

Code

<blockquote class="right">Suspendisse semper bibendum...</blockquote>

TOP

Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque.

augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt a 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 pulvar. Proin ullamcor per urna et felis.Vestibulum iaculis lacinia est. Proin dictum elementum velit. Fusce euismod consequat ante. Lorem ipsum amet, consecttuer. adipiscing elit. Pellentesque sed dolor. Aliquam congue fermentum nisl. Mauris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam

Code

<blockquote class="left">Suspendisse semper bibendum...</blockquote>

TOP

Table styling

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

Header1	Header2	Header3	Header4	Header5
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

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 big text <big> </big>
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>

TOP

Buttons, links

Veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit asper natur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius.

Styling lists

Vestibulu libero nisl porta vel scelerisque eget malesuada at neque.
- Vestibulum ante ipsum primis
- faucibus orci luctus et
- Suspendisse sollicitudin velit
Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt
Donec porta diam eu massa
Quisque diam lorem interdum vitae
Donec eget tellus non erat lacinia fer mentum. Donec in velit vel ipsum.

Vestibulu libero nisl porta vel scelerisque eget malesuada at neque.
Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt
Donec porta diam eu massa
Quisque diam lorem interdum vitae
Donec eget tellus non erat lacinia fer
mentum. Donec in velit vel ipsum.
Proin ullamcorper urna et felis
Fusce euismod consequat ante
Lorem ipsu dolor sit amet consectetr

Code

<ul class="list_1">
    <li>Sample text</li>
    <li>Sample text</li>
    <li><a href="#"></a>
        <ul>
            <li>sample text</li>
            <li>sample text</li>
        </ul>
    </li>
</ul>

Code

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

A definition list

A definition term: 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. Ut pharetra augue nec augue.
A definition term: 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. Ut pharetra augue nec augue.

TOP

Quotation

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.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Code

<blockquote class="quotes">Suspendisse semper bibendum...</blockquote>

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-

Code

<div class="info-box">
	<p class="icon"><img src="images/icon-info.png" alt=""></p>
	Vestibulum at aliquet est...
</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-

Code

<div class="download-box">
	<p class="icon"><img src="images/icon-download.png" alt=""></p>
	Vestibulum at aliquet est...
</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-

Code

<div class="notification-box">
	<p class="icon"><img src="images/icon-note.png" alt=""></p>
	Vestibulum at aliquet est...
</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-

Code

<div class="error-box">
	<p class="icon"><img src="images/icon-error.png" alt=""></p>
	Vestibulum at aliquet est...
</div>

TOP