This is a H1 heading

<h1></h1>

This is a H2 heading

<h2></h2>

This is a H3 heading

<h3></h3>

This is a H4 heading

<h4></h4>

This is a H5 heading

<h5></h5>

This is a H6 heading

<h6></h6>

Image aligned left & right

Suspendisse semper bibendum enim, sed volutpat velit dapibus eu. Ut sit amet mi ut tellus lacinia malesuada ut ut odio. Sed tempor nisl eu nisi mattis adipiscing. Maecenas at posuere diam. Ut venenatis mollis est, at sollicitudin ante rutrum malesuada.

Nam nisl urna, feugiat sed vulputate non, tempus ac nulla. Nam aliquet pulvinar augue at. Donec id hendrerit risus. Curabitur molestie purus at orci suscipit et convallis nulla dignissim. Ut convallis turpis nec nulla commodo dictum non sed diam. Nam aliquet pulvinar augue at. 
<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.
top

Suspendisse semper bibendum enim, sed volutpat velit dapibus eu. Ut sit amet mi ut tellus lacinia malesuada ut ut odio. Sed tempor nisl eu nisi mattis adipiscing. Maecenas at posuere diam. Ut venenatis mollis est, at sollicitudin ante rutrum malesuada.

Nunc adipiscing interdum elit, vel aliquam risus porta sit amet. Sed elementum blandit volutpat. Ut sit amet mi ut tellus lacinia malesuada ut ut odio. Ut sit amet mi ut tellus lacinia malesuada ut ut odio. Ut sit amet mi ut tellus lacini. 
<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
Caption

Suspendisse semper bibendum enim, sed volutpat velit dapibus eu. Ut sit amet mi ut tellus lacinia malesuada ut ut odio. Ut sit amet mi ut tellus lacinia malesuada ut ut odio. Sed tempor nisl eu nisi mattis adipiscing. Maecenas at posuere diam. Ut venenatis mollis est, at sollicitudin ante rutrum malesuada.

Quisque elementum congue magna. Nunc mattis purus interdum lorem fermentum aliquet non dignissim enim. Nunc sodales hendrerit nunc id porttitor. Nunc metus mi, tincidunt ut rutrum adipiscing, viverra nec risus. Nunc eu neque id ipsum consectetur venenatis. Nam justo risus, elementum at feugiat eget, molestie ut magna. Sed ullamcorper euismod lorem at placerat.

<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

Rorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tristique justo, id dictum lorem feugiat sed. Nam at blandit orci. Donec viverra imperdiet leo, pellentesque porta purus rhoncus eget. Class aptent per nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tristique justo, id dictum lorem feugiat sed. Nam at blandit orci. Donec viverra imperdiet leo, pellentesque porta purus rhoncus eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

<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

Pullquotes

Suspendisse semper bibendum enim, sed volutpat velit dapibus eu. Ut sit amet mi ut tellus lacinia malesuada ut ut odio. Sed tempor nisl eu nisi mattis adipiscing. Maecenas at posuere diam. Ut venenatis mollis est, at sollicitudin ante rnunc id porttitor.

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

<blockquote>Suspendisse semper bibendum...</blockquote>
Suspendisse semper bibendum enim, sed volutpat velit dapibus eu. Ut sit amet mi ut tellus lacinia malesuada ut ut odio. Sed tempor nisl eu nisi mattis adipiscing. Maecenas at posuere diam.

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

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

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Aliquam ut tellus mauris, in gravida enim. Proin sit amet nunc odio, ut convallis nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

Suspendisse semper bibendum enim, sed volutpat velit dapibus eu. Ut sit amet mi ut tellus lacinia malesuada ut ut odio. Sed tempor nisl eu nisi mattis adipiscing.

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum. Proin sit amet nunc odio, nisi. Et urna elementum vel pellentesque ante ornare. Duis tellus nisi, aliquet in suscipit nec, blandit in ipsum.

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

Button links

Aliquam sit amet mauris felis, lacinia tincidunt ligula. Nunc vestibulum ornare mi vitae porttitor. Phasellus egestas consequat feugiat. Fusce ut elit eget neque tincidunt pretium. Quisque sodales massa at nunc egestas bibendum.

MoreMoreAny button may be longer...

<a href="#" class="button">More</a>
<a href="#" class="button style1">More</a>
<a href="#" class="button style2">More</a>
  1. Create a common HTML link <a href="#"></a>.
  2. Add button class (class="button").
  3. You may add additional classes (style1, style2) in order to change the button appearance.
top

Box styles

Vestibulum at aliquet est. Vestibulum tincidunt leo eget nunc pharetra nec ultricies elit egestas. Cras at metus nisl, id suscipit libero. Praesent pretium velit eget leo sodales suscipit quis et massa. 
<div class="info-box">
	Vestibulum at aliquet est...
</div>
Vestibulum at aliquet est. Vestibulum tincidunt leo eget nunc pharetra nec ultricies elit egestas. Cras at metus nisl, id suscipit libero. Praesent pretium velit eget leo sodales suscipit quis et massa. 
<div class="download-box">
	Vestibulum at aliquet est...
</div>
Vestibulum at aliquet est. Vestibulum tincidunt leo eget nunc pharetra nec ultricies elit egestas. Cras at metus nisl, id suscipit libero. Praesent pretium velit eget leo sodales suscipit quis et massa. 
<div class="notification-box">
	Vestibulum at aliquet est...
</div>
Vestibulum at aliquet est. Vestibulum tincidunt leo eget nunc pharetra nec ultricies elit egestas. Cras at metus nisl, id suscipit libero. Praesent pretium velit eget leo sodales suscipit quis et massa. 
<div class="error-box">
	Vestibulum at aliquet est...
</div>
top

Table styling

Nam nisl urna, feugiat sed vulputate non, tempus ac nulla. Curabitur molestie purus at orci suscipit et convallis nulla dignissim. Ut convallis turpis nec nulla commodo dictum non sed diam. Nulla convallis nibh vitae felis ullamcorper nec ullamcorper magna iaculis. Nam a lorem purus.

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 
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Division 1</td>
      ...
    </tr>
  </tbody>
</table>
top

Login form