This page presents most of typographical aspects of JA Norite. Make your readers happy with great Typography and User Experience!
Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.
Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst.
Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.
Below is a sample of <pre> or <div class="code">
#ja-rightcol {
width: 180px;
float: right;
color: #EEEEEE;
}
This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.
This is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Purity II bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words.
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!
01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">01.</span>Your content goes here!</p> to form a block number!
02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">02.</span>Your content goes here!</p> to form a block number!
03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">03.</span>Your content goes here!</p> to form a block number!
01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">01.</span>Your content goes here!</p> to form a block number!
02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">02.</span>Your content goes here!</p> to form a block number!
03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">03.</span>Your content goes here!</p> to form a block number!
01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">01.</span>Your content goes here!</p> to form a block number!
02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">02.</span>Your content goes here!</p> to form a block number!
03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">03.</span>Your content goes here!</p> to form a block number!
Use <p class="error"><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.
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!
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!
Use <div class="legend"><h3 class="legend-title">Your title</h3><p>Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>
Use <div class="legend-hilite"><h3 class="legend-title">Your title</h3><p>Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p></div>