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!
Legends
Legend - Style 1
Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.
Legend - Style 2
Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.
Rounded Legends
Rounded Legend - Style 1
Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.
Rounded Legend - Style 2
Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.
This is a sample Inline Tag. Use this to provide useful information.
This is a sample Inline Tag. Use this to provide useful information.
This is a sample Inline Tag. Use this to provide useful information.
This is a sample Inline Tag. Use this to provide useful information.
This is a sample Inline Tag. Use this to provide useful information.
This is a sample Inline Tag. Use this to provide useful information.
Rounded Tags
This is a sample Inline Tag. Use this to provide useful information.
This is a sample Inline Tag. Use this to provide useful information.
This is a sample Inline Tag. Use this to provide useful information.
This is a sample Inline Tag. Use this to provide useful information.
This is a sample Inline Tag. Use this to provide useful information.
This is a sample Inline Tag. Use this to provide useful information.
Special Module Style
Use module suffix: _badge badge-top to put this badge on any module you like!
Use module suffix: _badge badge-new to put this badge on any module you like!
Use module suffix: _badge badge-pick to put this badge on any module you like!
Use module suffix: _badge badge-hot to put this badge on any module you like!
Forms
Form Fieldset
Form Elements
This is a nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is another nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
A Simple Sidebar
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.
Incremental leading
Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.