Typography page

This is how your H1 heading may look like

<h1></h1>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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

This is how your H2 heading may look like

<h2></h2>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus.

This is how your H3 heading may look like

<h3></h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus.

This is how your H4 heading may look like

<h4></h4>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus.

This is how your H5 heading may look like

<h5></h5>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus.

This is how your H6 heading may look like

<h6></h6>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus.

Image aligned left & right

Quisque nulla. Vestibulum libero nisl, porta vel, sceleri sque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in fauci bus orci luctus et ultrices posuere cubilia Curae; Sus pendisse sollicitudin velit sed laugue nec augue.

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.

<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>
    </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.
Quisque nulla. Vestibulum libero nisl, porta vel, sceleri sque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in fauci bus orci luctus et ultrices posuere cubilia Curae; Sus pendisse sollicitudin velit sed laugue nec augue.
Vestibulum ante ipsum primiscibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin velit sed laugue nec augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. 
<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.
TOP

Image with caption

Caption
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollic itudin velit sed laugue nec augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, 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. Morbi nunc odio, gravida at, cursus nec.

Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada onec 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.

<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

AEnean nec eros. Vestibulum ante primis in faucibus orci luctus et ultr Suspendisse sollicitudin velit sed leo. 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.
BEnean nec eros. Vestibulum ante psu mis in faucibus orci luctus et ultndisse sollicitudin velit sed. leo hendrerit sit amet tincidunt ac, haretra augue nec augue. Nam elit magna, hendrerit sit amet tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. 
<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

CMorbi 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 erosrem ipsum.
Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapib us tincidunt metus.
Morbi nunc odio, gravida at, cursus nec, luctus a, loremaece nas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet erorem ipsum dolor sit amet, consectetuer adipiscing elit. Maurisfe rmentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend ac, scelerisque vitae, pede. Donec eget tellus non erat lac inia fermentum. Donec in velit vel ipsum auctor pulvinar. 
<blockquote class="right">Suspendisse semper bibendum...</blockquote>
Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce su scipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.
Quisque nulla. Vestibulum libero nisl, porta vel, sceleris que eget, malesuada at, neque. Vivamus eget nibh.
Morbi nunc odio, gravida at, cursus nec, luctus a, loremaece nas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet erorem ipsum dolor sit amet, consectetuer adipiscing elit. Maurisfe rmentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend ac, scelerisque vitae, pede. Donec eget tellus non erat lac inia fermentum. Donec in velit vel ipsum auctor pulvinar.
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. 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. 
<blockquote class="left">Suspendisse semper bibendum...</blockquote>
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

  • 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 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 <sup> </sup>
  • This is subscript <sub> </sub>
  • This is a variable <var> </var>
TOP

Button links

Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce sus cipit 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.

Read More    Read More    Any Button May be longer 
<a href="#" class="button">Learn more</a>
<a href="#" class="button1">Learn more</a>
<a href="#" class="button2">Any button may be longer</a>
  1. Create a common HTML link <a href="#"></a>.
  2. Add link_1 class (class="link_1").
  3. You may add additional classes (link_2, link_3) in order to change the button appearance.
TOP

Styling lists

<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>
  1. Fusce euismod consat ante
    Lorem ipsum dolor sit amet, consec
  2. Donec accumsan malesuada orci
  3. Vestibulum iaculis lacinia est roin
  4. Fusce euismod consequat ante orem
  5. Duis ultricies pharetra magna usce
  6. Vestibulum iaculis lacinia est roin
  7. Fusce euismod consequat ante orem
  8. Donec accumsan malesuada orci
<ol>
  <li><a href="#"></a> </li>
  <li><a href="#"></a> </li>
  <li><a href="#"></a> </li>
</ol>

A definition list

A definition term
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenea n nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum socii.
A definition term
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
TOP

Quotation

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.Praesent vestibulum molestie lacus.

Werra 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 Quisque diam lorem, interdum vitae, dapibus 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 felrra sed, nulla. Donec porta diam eu massa. 

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