Typography Page

This is how your H1 heading may look like

Tempor incididunt ut labore et dolore magna aliquat enim minim veniam quis nostru exercitation ullamco laboris nisi ut. Irure dolor reprehenderit in voluptate velit ese clum dolore eu fugiat nulla pariatur lorem ipsum dolor sit amet consectetuer adipiscing elit praese vestibulum molestie lacus aenean nonummy hendrerit mauris.

This is how your H2 heading may look like

Tempor incididunt ut labore et dolore magna aliquat enim minim veniam quis nostru exercitation ullamco laboris nisi ut. Irure dolor reprehenderit in voluptate velit ese clum dolore eu fugiat nulla pariatur lorem ipsum dolor sit amet consectetuer adipiscing elit praese vestibulum molestie lacus aenean nonummy hendrerit mauris.

This is how your H3 heading may look like

Tempor incididunt ut labore et dolore magna aliquat enim minim veniam quis nostru exercitation ullamco laboris nisi ut. Irure dolor reprehenderit in voluptate velit ese clum dolore eu fugiat nulla pariatur lorem ipsum dolor sit amet consectetuer adipiscing elit praese vestibulum molestie lacus aenean nonummy hendrerit mauris.

This is how your H4 heading may look like

Tempor incididunt ut labore et dolore magna aliquat enim minim veniam quis nostru exercitation ullamco laboris nisi ut. Irure dolor reprehenderit in voluptate velit ese clum dolore eu fugiat nulla pariatur lorem ipsum dolor sit amet consectetuer adipiscing elit praese vestibulum molestie lacus aenean nonummy hendrerit mauris.

This is how your H5 heading may look like

Tempor incididunt ut labore et dolore magna aliquat enim minim veniam quis nostru exercitation ullamco laboris nisi ut. Irure dolor reprehenderit in voluptate velit ese clum dolore eu fugiat nulla pariatur lorem ipsum dolor sit amet consectetuer adipiscing elit praese vestibulum molestie lacus aenean nonummy hendrerit mauris.

This is how your H6 heading may look like

Tempor incididunt ut labore et dolore magna aliquat enim minim veniam quis nostru exercitation ullamco laboris nisi ut. Irure dolor reprehenderit in voluptate velit ese clum dolore eu fugiat nulla pariatur lorem ipsum dolor sit amet consectetuer adipiscing elit praese vestibulum molestie lacus aenean nonummy hendrerit mauris.

top

Image Aligned Left & Right

Donec in velit vel ipsum auctor pulvinar aesent 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. Aenean auctor wisi et urna. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Tempor incididunt ut labore et dolore magna aliquat enim minim veniam quis nostru exercitation ullamco laboris nisi ut. Irure dolor.

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. Intger rutrum ante eu lacus. faucibus orci luctus et ultrices usce feugiat malesuada odio. Morb nunc odio, gravida at, cursus nec, luctus a, lorem. 

<div class="wrapper">
  <figure class="img-indent">
     <a href="images/slide-24.jpg" class="lightbox-image" data-gal="prettyPhoto" title="Example 1"><img src="images/3page_img6.jpg" alt=""></a>
  </figure>
  Simple text ...
</div>
  1. Create a code section like this: 
    <div class="wrapper">
  <figure class="img-indent">
     <a href="images/slide-24.jpg">
        <img src="images/3page_img6.jpg" alt="">
     </a>
  </figure>
</div>
  2. The href attribute should contain the path to the large image.
  3. Additionally you can add lightbox-image class and data-gal="prettyPhoto" title="Example 1" attributes in ordr to add a lightbox.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulu- mmolestie lacus. Aenean nonummy hendrerit mauris. Pha sellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient motes, 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 nonummy hendrerit mauris molestie lacus. Tempor incididunt ut labore et dolore magna. Donec accumsan malesuada orci. Donec sit amet eros. Aenean auctor wisi et urna vestibulum molestie lacus aenean nonummy. Fusce suscipit varius mi. Cum sociis natoque penatibus.

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 curaes uspendissesollici tudin velit sed leo. Ut pharetra augue nec augue. Nam elit magna, hendrerit sit amet, tincidunt ac. 

<div class="wrapper">
  <figure class="img-indent-r">
     <a href="images/slide-14.jpg" class="lightbox-image" data-gal="prettyPhoto" title="Example 1"><img src="images/3page_img2.jpg" alt=""></a>
  </figure>
  Simple text ...
</div>
  1. Create a code section like this: 
    <div class="wrapper">
  <figure class="img-indent-r">
     <a href="images/slide-14.jpg">
        <img src="images/3page_img2.jpg" alt="">
     </a>
  </figure>
</div>
  2. The href attribute should contain the path to the large image.
  3. Additionally you can add lightbox-image class and data-gal="prettyPhoto" title="Example 1" attributes in ordr to add a lightbox.
top

Image With Caption

Caption
Donec in velit vel ipsum auctor pulvinar aesent 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. Aenean auctor wisi et urna vestibulum molestie lacus aenean nonummy. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis.

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. Intger rutrum ante eu lacus. faucibus orci luctus et ultrices usce feugiat malesuada odio.Morb nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. 

<div class="wrapper">
  <figure class="img-indent rel">
     <a href="images/slide-20.jpg" class="lightbox-image" data-gal="prettyPhoto" title="Example 1"><img src="images/4page_img1.jpg" alt=""></a>
     <figcaption>Caption</figcaption>
  </figure>
  Simple text ...
</div>
  1. Create a code section like this: 
    <div class="wrapper">
  <figure class="img-indent rel">
     <a href="images/slide-20.jpg"><img src="images/4page_img1.jpg" alt=""></a>
     <figcaption>Caption</figcaption>
  </figure>
</div>
  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 data-gal="prettyPhoto" title="Example 1" attributes in ordr to add a lightbox.
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 <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

Buttons, Links

Fusce euismod consequat ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor. Aliquam congue fermentum nisl. Mauris accumsan nulla vel diam.

See all Any button may be longer More Read more 
<a href="#" class="button"><span class="txt">Read more</span></a>
  1. Create a common HTML link <a href="#"></a>.
  2. Add button-1 class (class="button-1").
  3. You may add additional classes (button, button-2, link-1) 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. Etuer adipiscing itesent enean
  2. Msumyen hassumellus portasuscip
  3. Integer rutre eu lacibuci luct
  4. Cubilia ndisse sollicerisque vitit
  5. Udin velit sed lerrasu nec
  6. Quissumque diam lorem
  7. Etuer adipiscing itesent enean nonu
<ol class="ol-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>
</ol>
top

A definition List

A definition term
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 penatibuset magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio.
A definition term
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 penatibuset magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. 
<dl>
  <dt>A definition term</dt>
  <dd>Some text...</dd>
  <dd>Some text...</dd>
</dl>
top

Quotation

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.

Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquat enim ad minim veniam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit..."

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. 

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