This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.
Blockquote
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!
Dropcaps
This is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Templates 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!
Lists Style
Ordered List
This is a sample Ordered List.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Un-Ordered List
This is a sample Unordered List.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Definition List
This is a sample Definition List.
Condimentum quis.
Congue Quisque augue elit dolor.
Congue Quisque augue elit dolor.
Special Unordered Lists
This is a sample Arrow list.
Use <ul class="ja-typo-list list-arrow"><li><span class="icon"> </span>List's content goes here!</li></ul>
This is a sample Arrowlist.
This is a sample Star list.
Use <ul class="ja-typo-list list-star"><li><span class="icon"> </span>List's content goes here!</li></ul>
This is a sample Starlist.
This is a sample Check list.
Use <ul class="ja-typo-list list-check"><li><span class="icon"> </span>List's content goes here!</li></ul>
Use <p class="error"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="message"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="tips"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="key"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="tag"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="cart"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="doc"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="note"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="photo"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="mobi"><span class="icon"> </span>Your message goes here!</p> to make this.
Bubbles
Grey Bubbles
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Blue Bubbles
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Black Bubbles
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Rounded Grey Bubbles
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Rounded Blue Bubbles
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Rounded Black Bubbles
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.
Author Name
Message Boxes & Legend Styles
Message Boxes with Icons
This is a sticky. Use <p class="box-sticky">Your clip note goes here!</p> to create a clip note!
This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box!
Message Boxes - Style 1
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!
Message Boxes - Style 2
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!
Rounded Message Boxes with Icons
This is a sticky. Use <p class="box-sticky">Your clip note goes here!</p> to create a clip note!
This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box!
Rounded Message Boxes - Style 1
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!
Rounded Message Boxes - Style 2
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!