http://vdap.org.au/index.php/tri-lieu/cai-nghien-heroin/9-uncategorised 2024-05-19T10:47:33+10:00 Joomla! - Open Source Content Management 2011-07-14T04:56:50+10:00 2011-07-14T04:56:50+10:00 http://vdap.org.au/index.php/tri-lieu/cai-nghien-heroin/9-uncategorised/75-whats-new-in-joomla-25 Super User info@vdap.org.au

<div class="feed-description"><p>The Joomla Project is pleased to announce the immediate availability of Joomla 2.5.1. This is a security release. This is also the first release made within the new six-month release cycle that started with the delivery of Joomla 1.6 in January 2011.</p> <p>The Production Leadership Team's goal is to continue to provide regular, frequent updates to the Joomla community. Learn more about Joomla! developement at the Developer Site.</p> <p>Version 1.6.5 will reach end of life one month from today, on 19 August 2011. All users of version 1.7 should update to version 2.5.0 before that time. The update process is very simple, and complete instructions are available here.</p></div>

<div class="feed-description"><p>The Joomla Project is pleased to announce the immediate availability of Joomla 2.5.1. This is a security release. This is also the first release made within the new six-month release cycle that started with the delivery of Joomla 1.6 in January 2011.</p> <p>The Production Leadership Team's goal is to continue to provide regular, frequent updates to the Joomla community. Learn more about Joomla! developement at the Developer Site.</p> <p>Version 1.6.5 will reach end of life one month from today, on 19 August 2011. All users of version 1.7 should update to version 2.5.0 before that time. The update process is very simple, and complete instructions are available here.</p></div> 2010-11-10T04:32:10+11:00 2010-11-10T04:32:10+11:00 http://vdap.org.au/index.php/tri-lieu/cai-nghien-heroin/9-uncategorised/74-typography Super User info@vdap.org.au

<div class="feed-description"><div id="ja-typo"> <p>This page presents most of typographical aspects of JA T3v2 Framework. <span class="highlight">Make your readers happy</span> with great Typography and User Experience!</p> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Preformatted text</span></h1> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Headings</span></h2> <div class="ja-typo-blockct clearfix"> <h1>This is a sample Heading 1. Lorem ipsum.</h1> <h2>This is a sample Heading 2. Lorem ipsum.</h2> <h3>This is a sample Heading 3. Lorem ipsum.</h3> <h4>This is a sample Heading 4. Lorem ipsum.</h4> <h5>This is a sample Heading 5. Lorem ipsum.</h5> </div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Special Content</span></h2> <div class="ja-typo-blockct clearfix"> <p>Below is a sample of <strong>pre</strong> tag or <strong>code</strong> class:</p> <pre>#ja-rightcol { width: 180px; float: right; color: #EEEEEE; } </pre> <p>This is a <span class="highlight">highlight phrase</span>. Use <strong>class="highlight"</strong>.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Blockquote</span></h2> <div class="ja-typo-blockct clearfix"> <blockquote><span class="open">T</span>his is a sample <strong>Blockquote</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</blockquote> <blockquote><span class="open">T</span>his is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.<span class="close">!</span></blockquote> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Dropcaps</span></h2> <div class="ja-typo-blockct clearfix"> <p><span class="dropcap">T</span>his 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.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Lists Style</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block first clearfix"> <h2 class="ja-typo-title"><span>Ordered List</span></h2> <div class="ja-typo-blockct clearfix"><ol> <li>This is a sample <strong>Ordered List</strong>.</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> </ol></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Un-Ordered List</span></h2> <div class="ja-typo-blockct clearfix"> <ul> <li>This is a sample <strong>Unordered List</strong>.</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> </ul> </div> </div> <div class="ja-typo-block last clearfix"> <h2 class="ja-typo-title"><span>Definition List</span></h2> <div class="ja-typo-blockct clearfix"><dl> <dt>This is a sample <strong>Definition List</strong>.</dt> <dd>Condimentum quis.</dd> <dd>Congue Quisque augue elit dolor.</dd> <dd>Congue Quisque augue elit dolor.</dd> </dl></div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Special Unordered Lists</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-arrow"> <li><span class="icon"> </span>This is a sample <strong>Arrow list</strong>.</li> <li><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li><span class="icon"> </span>This is a sample Arrowlist.</li> </ul> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-star"> <li><span class="icon"> </span>This is a sample <strong>Star list</strong>.</li> <li><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li><span class="icon"> </span>This is a sample Starlist.</li> </ul> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-check"> <li><span class="icon"> </span>This is a sample <strong>Check list</strong>.</li> <li><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li><span class="icon"> </span>This is a sample Checklist.</li> </ul> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Block Number</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-1"><span class="bignumber">01</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-1"><span class="bignumber">02</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-1"><span class="bignumber">03</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-2"><span class="bignumber">A</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-2"><span class="bignumber">B</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-2"><span class="bignumber">C</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-3"><span class="bignumber">a</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-3"><span class="bignumber">b</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-3"><span class="bignumber">c</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Icons Style</span></h1> <div class="ja-typo-blockrow cols-2 clearfix"> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-icon icon-error"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-message"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-tips"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-key"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-tag"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-icon icon-cart"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-doc"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-note"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-photo"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-mobi"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Bubbles</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Grey Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-1"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-2"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Blue Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-3"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-4"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Black Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-5"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-6"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Grey Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-1"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-2"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Blue Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-3"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-4"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Black Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-5"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-6"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Message Boxes &amp; Legend Styles</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes with Icons</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-sticky"><strong>This is a sticky</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-download"><strong>This is a download box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes - Style 1</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-grey-1"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-hilite-1"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes - Style 2</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-grey-2"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-hilite-2"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes with Icons</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-sticky"><strong>This is a sticky</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-download"><strong>This is a download box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes - Style 1</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-grey-1"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-hilite-1"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes - Style 2</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-grey-2"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-hilite-2"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <h2 class="ja-typo-title"><span>Legends</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-1"> <h3 class="legend-title">Legend - Style 1</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-2"> <h3 class="legend-title">Legend - Style 2</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <h2 class="ja-typo-title"><span>Rounded Legends</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-rounded legend-1"> <h3 class="legend-title">Rounded Legend - Style 1</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-rounded legend-2"> <h3 class="legend-title">Rounded Legend - Style 2</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Buttons &amp; Tags</span></h1> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Big Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-blue ja-typo-btn-big btn-big-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-big btn-big-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-big btn-big-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-big btn-big-grey" href="#"><span>Button Text</span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Icon Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn ja-typo-btn-icn btn-icn-save" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-tip" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-warning" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-info" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-ok" href="#"><span><span>Button Text</span></span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Small Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-blue ja-typo-btn-sm btn-sm-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-sm btn-sm-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-sm btn-sm-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-sm btn-sm-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-sm btn-sm-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-sm btn-sm-grey" href="#"><span>Button Text</span></a></div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Big Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-big btn-blue ja-typo-btn-big btn-big-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-green ja-typo-btn-big btn-big-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-red ja-typo-btn-big btn-big-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-orange ja-typo-btn-big btn-big-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-black ja-typo-btn-big btn-big-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-grey ja-typo-btn-big btn-big-grey" href="#"><span>Button Text</span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Icon Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-save" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-tip" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-warning" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-info" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-ok" href="#"><span><span>Button Text</span></span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Small Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-sm btn-blue ja-typo-btn-sm btn-sm-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-green ja-typo-btn-sm btn-sm-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-red ja-typo-btn-sm btn-sm-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-orange ja-typo-btn-sm btn-sm-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-black ja-typo-btn-sm btn-sm-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-grey ja-typo-btn-sm btn-sm-grey" href="#"><span>Button Text</span></a></div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Squared Tags</span></h2> <div class="ja-typo-blockct clearfix"> <p>This is a sample <span class="ja-typo-tag tag-grey">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-blue">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-green">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-red">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-orange">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-black">Inline Tag</span>. Use this to provide useful information.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Tags</span></h2> <div class="ja-typo-blockct clearfix"> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-grey">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-blue">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-green">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-red">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-orange">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-black">Inline Tag</span>. Use this to provide useful information.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Special Module Style</span></h1> <div class="ja-typo-blockrow cols-4 clearfix"> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-top"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-top</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-new"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-new</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-pick"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-pick</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-hot" style="margin-right: 0;"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-hot</strong> to put this badge on any module you like!</div> </div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Forms</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Form Fieldset</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset> <legend>Templates Fieldset</legend> 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. </fieldset></div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset class="ja-typo-fieldset fieldset-1"> <legend>Special Fieldset - Style 1</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est. </fieldset></div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset class="ja-typo-fieldset fieldset-2"> <legend>Special Fieldset - Style 2</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est. </fieldset></div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <h2 class="ja-typo-title"><span>Form Elements</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><form> <p><label for="input">Sample Input 1</label> <br /> <input class="inputbox" name="input" type="input" /></p> <p><label for="input">Sample Input 2</label> <br /> <input class="inputbox" name="input" type="input" /></p> <p><input type="radio" /><label for="radio">Sample Radio Input</label> <input type="checkbox" /><label for="checkbox">Sample CheckBox Input</label></p> <p><label for="select">Sample Select Field:</label><br /> <select id="select"><option>Option One</option><option>Option Two</option></select></p> <p><label for="textarea">Sample Textarea Field:</label><br /> <textarea class="inputbox" cols="80" rows="5">Textarea text</textarea></p> <p><button>Submit Button</button> <button>Reset Button</button></p> </form></div> </div> </div> </div> </div></div>

<div class="feed-description"><div id="ja-typo"> <p>This page presents most of typographical aspects of JA T3v2 Framework. <span class="highlight">Make your readers happy</span> with great Typography and User Experience!</p> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Preformatted text</span></h1> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Headings</span></h2> <div class="ja-typo-blockct clearfix"> <h1>This is a sample Heading 1. Lorem ipsum.</h1> <h2>This is a sample Heading 2. Lorem ipsum.</h2> <h3>This is a sample Heading 3. Lorem ipsum.</h3> <h4>This is a sample Heading 4. Lorem ipsum.</h4> <h5>This is a sample Heading 5. Lorem ipsum.</h5> </div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Special Content</span></h2> <div class="ja-typo-blockct clearfix"> <p>Below is a sample of <strong>pre</strong> tag or <strong>code</strong> class:</p> <pre>#ja-rightcol { width: 180px; float: right; color: #EEEEEE; } </pre> <p>This is a <span class="highlight">highlight phrase</span>. Use <strong>class="highlight"</strong>.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Blockquote</span></h2> <div class="ja-typo-blockct clearfix"> <blockquote><span class="open">T</span>his is a sample <strong>Blockquote</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</blockquote> <blockquote><span class="open">T</span>his is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.<span class="close">!</span></blockquote> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Dropcaps</span></h2> <div class="ja-typo-blockct clearfix"> <p><span class="dropcap">T</span>his 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.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Lists Style</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block first clearfix"> <h2 class="ja-typo-title"><span>Ordered List</span></h2> <div class="ja-typo-blockct clearfix"><ol> <li>This is a sample <strong>Ordered List</strong>.</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> </ol></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Un-Ordered List</span></h2> <div class="ja-typo-blockct clearfix"> <ul> <li>This is a sample <strong>Unordered List</strong>.</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> <li>Lorem ipsum dolor sit amet consectetur</li> </ul> </div> </div> <div class="ja-typo-block last clearfix"> <h2 class="ja-typo-title"><span>Definition List</span></h2> <div class="ja-typo-blockct clearfix"><dl> <dt>This is a sample <strong>Definition List</strong>.</dt> <dd>Condimentum quis.</dd> <dd>Congue Quisque augue elit dolor.</dd> <dd>Congue Quisque augue elit dolor.</dd> </dl></div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Special Unordered Lists</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-arrow"> <li><span class="icon"> </span>This is a sample <strong>Arrow list</strong>.</li> <li><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li><span class="icon"> </span>This is a sample Arrowlist.</li> </ul> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-star"> <li><span class="icon"> </span>This is a sample <strong>Star list</strong>.</li> <li><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li><span class="icon"> </span>This is a sample Starlist.</li> </ul> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <ul class="ja-typo-list list-check"> <li><span class="icon"> </span>This is a sample <strong>Check list</strong>.</li> <li><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li> <li><span class="icon"> </span>This is a sample Checklist.</li> </ul> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Block Number</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-1"><span class="bignumber">01</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-1"><span class="bignumber">02</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-1"><span class="bignumber">03</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-2"><span class="bignumber">A</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-2"><span class="bignumber">B</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-2"><span class="bignumber">C</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="blocknumber blocknumber-3"><span class="bignumber">a</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-3"><span class="bignumber">b</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="blocknumber blocknumber-3"><span class="bignumber">c</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Icons Style</span></h1> <div class="ja-typo-blockrow cols-2 clearfix"> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-icon icon-error"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-message"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-tips"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-key"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-tag"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-icon icon-cart"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-doc"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-note"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-photo"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-icon icon-mobi"><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Bubbles</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Grey Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-1"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-2"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Blue Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-3"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-4"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Black Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-5"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-6"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Grey Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-1"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-2"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Blue Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-3"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-4"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Black Bubbles</span></h2> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-bubble bubble-rounded bubble-5"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> <div class="ja-typo-bubble bubble-rounded bubble-6"> <div class="ja-typo-bubblect">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.</div> <p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p> </div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Message Boxes &amp; Legend Styles</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes with Icons</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-sticky"><strong>This is a sticky</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-download"><strong>This is a download box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes - Style 1</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-grey-1"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-hilite-1"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Message Boxes - Style 2</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-grey-2"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-hilite-2"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> <div class="ja-typo-blockrow cols-3 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes with Icons</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-sticky"><strong>This is a sticky</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-download"><strong>This is a download box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes - Style 1</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-grey-1"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-hilite-1"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Message Boxes - Style 2</span></h2> <div class="ja-typo-blockct clearfix"> <p class="ja-typo-box box-rounded box-grey-2"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> <p class="ja-typo-box box-rounded box-hilite-2"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p> </div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <h2 class="ja-typo-title"><span>Legends</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-1"> <h3 class="legend-title">Legend - Style 1</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-2"> <h3 class="legend-title">Legend - Style 2</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <h2 class="ja-typo-title"><span>Rounded Legends</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-rounded legend-1"> <h3 class="legend-title">Rounded Legend - Style 1</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="ja-typo-legend legend-rounded legend-2"> <h3 class="legend-title">Rounded Legend - Style 2</h3> Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Buttons &amp; Tags</span></h1> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Big Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-blue ja-typo-btn-big btn-big-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-big btn-big-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-big btn-big-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-big btn-big-grey" href="#"><span>Button Text</span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Icon Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn ja-typo-btn-icn btn-icn-save" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-tip" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-warning" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-info" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-ok" href="#"><span><span>Button Text</span></span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Small Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-blue ja-typo-btn-sm btn-sm-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-sm btn-sm-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-sm btn-sm-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-sm btn-sm-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-sm btn-sm-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-sm btn-sm-grey" href="#"><span>Button Text</span></a></div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Big Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-big btn-blue ja-typo-btn-big btn-big-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-green ja-typo-btn-big btn-big-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-red ja-typo-btn-big btn-big-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-orange ja-typo-btn-big btn-big-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-black ja-typo-btn-big btn-big-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-grey ja-typo-btn-big btn-big-grey" href="#"><span>Button Text</span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Icon Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-save" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-tip" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-warning" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-info" href="#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-ok" href="#"><span><span>Button Text</span></span></a></div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Small Buttons</span></h2> <div class="ja-typo-blockct clearfix"><a class="ja-typo-btn btn-rounded-sm btn-blue ja-typo-btn-sm btn-sm-blue" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-green ja-typo-btn-sm btn-sm-green" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-red ja-typo-btn-sm btn-sm-red" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-orange ja-typo-btn-sm btn-sm-orange" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-black ja-typo-btn-sm btn-sm-black" href="#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-grey ja-typo-btn-sm btn-sm-grey" href="#"><span>Button Text</span></a></div> </div> </div> <div class="ja-typo-blockrow cols-2 clearfix"> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Squared Tags</span></h2> <div class="ja-typo-blockct clearfix"> <p>This is a sample <span class="ja-typo-tag tag-grey">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-blue">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-green">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-red">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-orange">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-black">Inline Tag</span>. Use this to provide useful information.</p> </div> </div> <div class="ja-typo-block"> <h2 class="ja-typo-title"><span>Rounded Tags</span></h2> <div class="ja-typo-blockct clearfix"> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-grey">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-blue">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-green">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-red">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-orange">Inline Tag</span>. Use this to provide useful information.</p> <p>This is a sample <span class="ja-typo-tag tag-rounded tag-black">Inline Tag</span>. Use this to provide useful information.</p> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Special Module Style</span></h1> <div class="ja-typo-blockrow cols-4 clearfix"> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-top"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-top</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-new"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-new</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-pick"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-pick</strong> to put this badge on any module you like!</div> </div> </div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"> <div class="moduletable moduletable_badge badge-hot" style="margin-right: 0;"><span class="badge"> </span> <div class="ja-box-ct">Use module suffix: <strong>_badge badge-hot</strong> to put this badge on any module you like!</div> </div> </div> </div> </div> </div> <div class="ja-typo-blockswrap clearfix"> <h1 class="ja-typo-title"><span>Forms</span></h1> <div class="ja-typo-blockrow cols-3 clearfix"> <h2 class="ja-typo-title"><span>Form Fieldset</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset> <legend>Templates Fieldset</legend> 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. </fieldset></div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset class="ja-typo-fieldset fieldset-1"> <legend>Special Fieldset - Style 1</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est. </fieldset></div> </div> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><fieldset class="ja-typo-fieldset fieldset-2"> <legend>Special Fieldset - Style 2</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est. </fieldset></div> </div> </div> <div class="ja-typo-blockrow cols-1 clearfix"> <h2 class="ja-typo-title"><span>Form Elements</span></h2> <div class="ja-typo-block"> <div class="ja-typo-blockct clearfix"><form> <p><label for="input">Sample Input 1</label> <br /> <input class="inputbox" name="input" type="input" /></p> <p><label for="input">Sample Input 2</label> <br /> <input class="inputbox" name="input" type="input" /></p> <p><input type="radio" /><label for="radio">Sample Radio Input</label> <input type="checkbox" /><label for="checkbox">Sample CheckBox Input</label></p> <p><label for="select">Sample Select Field:</label><br /> <select id="select"><option>Option One</option><option>Option Two</option></select></p> <p><label for="textarea">Sample Textarea Field:</label><br /> <textarea class="inputbox" cols="80" rows="5">Textarea text</textarea></p> <p><button>Submit Button</button> <button>Reset Button</button></p> </form></div> </div> </div> </div> </div></div>