This page presents most of typographical aspects of JA T3v2 Framework. Make your readers happy with great Typography and User Experience!
Preformatted text
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 of <pre> tag or code class:
#ja-rightcol {
width: 180px;
float: right;
color: #EEEEEE;
}
This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.
Blockquote
This is a sample Blockquote. Use <blockquote class="blockquote-1">Your quote goes here!</blockquote> to form a quote!
This is a sample Blockquote. Use <blockquote class="blockquote-2"><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>
- This is a sample Checklist.
Block Number
01Use <p class="blocknumber blocknumber-1"><span class="bignumber">01</span>Your content goes here!</p>
02Use <p class="blocknumber blocknumber-1"><span class="bignumber">02</span>Your content goes here!</p>
03Use <p class="blocknumber blocknumber-1"><span class="bignumber">03</span>Your content goes here!</p>
AUse <p class="blocknumber blocknumber-2"><span class="bignumber">A</span>Your content goes here!</p>
BUse <p class="blocknumber blocknumber-2"><span class="bignumber">B</span>Your content goes here!</p>
CUse <p class="blocknumber blocknumber-2"><span class="bignumber">C</span>Your content goes here!</p>
aUse <p class="blocknumber blocknumber-3"><span class="bignumber">a</span>Your content goes here!</p>
bUse <p class="blocknumber blocknumber-3"><span class="bignumber">b</span>Your content goes here!</p>
cUse <p class="blocknumber blocknumber-3"><span class="bignumber">c</span>Your content goes here!</p>
Icons Style
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
Message Boxes with Icons
This is a sticky. Use <p class="box-icon1">Your content goes here!</p> to create a clip note!
This is a download box. Use <p class="box-icon2">Your content goes here!</p> to create a download box!
This is a download box. Use <p class="box-icon3">Your content goes here!</p> to create a download box!
This is a download box. Use <p class="box-icon4">Your content goes here!</p> to create a download box!
Special Module Style
Module Title
Use module suffix: _badge badge-top to put this badge on any module you like!
Module Title
Use module suffix: _badge badge-new to put this badge on any module you like!
Module Title
Use module suffix: _badge badge-pick to put this badge on any module you like!
Module Title
Use module suffix: _badge badge-hot to put this badge on any module you like!
Module Title
Use module suffix: _type to put this badge on any module you like!
Module Title
Use module suffix: _black to put this badge on any module you like!
Module Title
Use module suffix: _white to put this badge on any module you like!
Forms
Form Fieldset
Templates Fieldset 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 suscipit ac.
Special Fieldset - Style 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est.
Form Elements
Sample Input 1
Sample Input 2
Sample Radio Input
Sample CheckBox Input
Sample Select Field: Option OneOption Two
Sample Textarea Field: Textarea text
Submit Button Reset Button
{jacomment off}
