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>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>
- 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
Bubbles
Grey Bubbles
Blue Bubbles
Black Bubbles
Rounded Grey Bubbles
Rounded Blue Bubbles
Rounded Black Bubbles
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!
Buttons & Tags
Big Buttons
Icon Buttons
Small Buttons
Rounded Big Buttons
Rounded Icon Buttons
Rounded Small Buttons
Squared 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.
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.
Comentarios