This is an H1 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is an H2 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is an H3 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is an H4 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is an H5 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

This is an H6 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.

Message box styles:

This is an example of the 'preformatted' text.
To use this style use the following under HTML mode:
<pre>Your text goes here...</pre>

Blockquote styles:

This is an example of a blue ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="blue">Your blockquote message goes here…</blockquote>

This is an example of a red ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="red">Your blockquote message goes here…</blockquote>

This is an example of a green ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="green">Your blockquote message goes here…</blockquote>

This is an example of a orange ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="orange">Your blockquote message goes here…</blockquote>

This is an example of a grey ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="grey">Your blockquote message goes here…</blockquote>

List styles:

To use the list styles below create a list in the following format: <ul class="class name"><li>….</li><li>….</li>…</ul>

• To apply this list style use: <ul class="list-1"><li>….</li><li>….</li>…</ul>.

• To apply this list style use: <ul class="list-2"><li>….</li><li>….</li>…</ul>.

• To apply this list style use: <ul class="list-3"><li>….</li><li>….</li>…</ul>.

• To apply this list style use: <ul class="list-4"><li>….</li><li>….</li>…</ul>.

• To apply this list style use: <ul class="list-5"><li>….</li><li>….</li>…</ul>.

• To apply this list style use: <ul class="list-6"><li>….</li><li>….</li>…</ul>.

• To apply this list style use: <ul class="list-7"><li>….</li><li>….</li>…</ul>.

• To apply this list style use: <ul class="list-8"><li>….</li><li>….</li>…</ul>.

• To apply this list style use: <ul class="list-9"><li>….</li><li>….</li>…</ul>.

• To apply this list style use: <ul class="list-10"><li>….</li><li>….</li>…</ul>.

Dropcaps:

You can generate a dropcap by using the following sintax: <span class="dropcap">A</span>, the result:
Aoccdrnig to rscheearch at an Elingsh uinervtisy, it deosn’t mttaer in waht oredr the ltteers in a wrod are, olny taht the frist and lsat ltteres are at the rghit pcleas. The rset can be a toatl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae we do not raed ervey lteter by ilstef, but the wrod as a wlohe.

Expandable Button shortcode:

Sign Up Button

Image Alignment:

Use the following css classes to align images, make sure you aso update the image width and height according to your images. for left align:

Left Image Alignment:
Here's the html:
<img class="alignleft" src="images/demo-image.gif" alt="Demo Image" width="200" height="200" />
All you need to do is add the class "alignleft" to the <img /> tag to get the result.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Right Image Alignment:
Here's the html:
<img class="alignright" src="images/demo-image.gif" alt="Demo Image" width="200" height="200" />
All you need to do is add the class "alignright" to the <img /> tag to get the result.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Center Image Alignment:
Here's the html:
<img class="aligncenter" src="images/demo-image.gif" alt="Demo Image" width="200" height="200" />
All you need to do is add the class "aligncenter" to the <img /> tag to get the result.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Talbe Styles:

Column Header here	Column Header here
Subtotal:	$0.00
Discount:	$0.00
Shipping:	$0.00
Tax:	$0.00
TOTAL:	$0.00
Table Footer here...

There are a couple of additional examples for table styles at the Cart page.