JA TypographyThis page presents most of typographical aspects of JA T3v2 Framework. Make your readers happy with great Typography and User Experience! Preformatted textHeadingsThis 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 ContentBelow 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>. BlockquoteThis 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! DropcapsThis 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 StyleOrdered List
Un-Ordered List
Definition List
Special Unordered Lists
Block Number01Use <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 StyleBubblesGrey 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Message Boxes & Legend StylesMessage Boxes with IconsThis 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 1This 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 2This 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 IconsThis 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 1This 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 2This 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! LegendsLegend - Style 1Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.Legend - Style 2Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.Rounded LegendsRounded Legend - Style 1Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.Rounded Legend - Style 2Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.Buttons & TagsBig ButtonsIcon ButtonsSmall ButtonsRounded Big ButtonsRounded Icon ButtonsRounded Small ButtonsSquared TagsThis 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 TagsThis 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!
FormsForm FieldsetForm Elements |
