background
Headings

This is a sample Heading 1. Lorem ipsum.

This is a sample Heading 2. Lorem ipsum.

This is a sample Heading 3. Lorem ipsum.

This is a sample Heading 4. Lorem ipsum.

This is a sample Heading 5. Lorem ipsum.
Special Content
Below is a sample oftag or code class:
#jp-rightcol 
width: 180px;
float: right;
color: #EEEEEE;

This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>
Drop Caps

This is a Magazine Style Drop Cap. The first letter in this paragraph is big. Joomlaplates bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. Use <p><span class="dropcap">T</span>Your content goes here!</p> to form a dropcap!

Block Quotes
This is a sample Blockquote. Use <blockquote>Your quote goes here!</blockquote> to form a quote!
This is a sample Blockquote. Use <blockquote><span class="open">Y</span>our quote goes her<span class="close">e!</span></blockquote> to form a quote!
List Styles
  • This is a sample Arrow list.
  • Use <ul class="arrow"><li>List content goes here!</li></ul>
  • This is a sample Arrowlist.
  • This is a sample Star list.
  • Use <ul class="star"><li>List content goes here!</li></ul>
  • This is a sample Starlist.
  • This is a sample Check list.
  • Use <ul class="check"><li>List content goes here!</li></ul>
  • This is a sample Checklist.
Messages

Use <p class="icon-error">Your message goes here!</p> to make this.

Use <p class="icon-message">Your message goes here!</p> to make this.

Use <p class="icon-tips">Your message goes here!</p> to make this.

Use <p class="icon-key">Your message goes here!</p> to make this.

Use <p class="icon-tag">Your message goes here!</p> to make this.

Use <p class="icon-cart">Your message goes here!</p> to make this.

Use <p class="icon-doc">Your message goes here!</p> to make this.

Use <p class="icon-note">Your message goes here!</p> to make this.

Use <p class="icon-photo">Your message goes here!</p> to make this.

Use <p class="icon-mobi">Your message goes here!</p> to make this.

Message Boxes

This is a grey box. Use <p class="box-grey">Your content goes here!</p> to create a grey box!

This is a hilite box. Use <p class="box-hilite">Your content goes here!</p> to create a hilite box!

This is a sticky box. Use <p class="box-sticky">Your sticky clip note goes here!</p> to create a sticky clip note!

This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box!