Welcome to JoomlArt Demo Site https://ja-graphite.demo.joomlart.com/index.php/ja-graphites-typography/9-uncategorised 2024-05-18T12:37:22+00:00 Welcome to JoomlArt Demo Site no-reply@joomsolutions.com Joomla! - Open Source Content Management 2019-12-19T07:09:59+00:00 2019-12-19T07:09:59+00:00 https://ja-graphite.demo.joomlart.com/index.php/ja-graphites-typography Super User admin@joomlart.com

<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 {<br /> width: 180px;<br /> float: right;<br /> color: #EEEEEE;<br />}<br /></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="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-big btn-big-orange" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-big btn-big-black" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-big btn-big-grey" href="https://ja-graphite.demo.joomlart.com/#"><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="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-tip" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-warning" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-info" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-ok" href="https://ja-graphite.demo.joomlart.com/#"><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="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-sm btn-sm-green" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-sm btn-sm-red" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-sm btn-sm-orange" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-sm btn-sm-black" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-sm btn-sm-grey" href="https://ja-graphite.demo.joomlart.com/#"><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="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-green ja-typo-btn-big btn-big-green" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-red ja-typo-btn-big btn-big-red" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-orange ja-typo-btn-big btn-big-orange" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-black ja-typo-btn-big btn-big-black" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-grey ja-typo-btn-big btn-big-grey" href="https://ja-graphite.demo.joomlart.com/#"><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="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-tip" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-warning" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-info" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-ok" href="https://ja-graphite.demo.joomlart.com/#"><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="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-green ja-typo-btn-sm btn-sm-green" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-red ja-typo-btn-sm btn-sm-red" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-orange ja-typo-btn-sm btn-sm-orange" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-black ja-typo-btn-sm btn-sm-black" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-grey ja-typo-btn-sm btn-sm-grey" href="https://ja-graphite.demo.joomlart.com/#"><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-2 clearfix"> <h2 class="ja-typo-title"><span>Form Fieldset</span></h2> <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 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 {<br /> width: 180px;<br /> float: right;<br /> color: #EEEEEE;<br />}<br /></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="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-big btn-big-orange" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-big btn-big-black" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-big btn-big-grey" href="https://ja-graphite.demo.joomlart.com/#"><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="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-tip" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-warning" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-info" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-ok" href="https://ja-graphite.demo.joomlart.com/#"><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="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-sm btn-sm-green" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-sm btn-sm-red" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-sm btn-sm-orange" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-sm btn-sm-black" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-sm btn-sm-grey" href="https://ja-graphite.demo.joomlart.com/#"><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="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-green ja-typo-btn-big btn-big-green" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-red ja-typo-btn-big btn-big-red" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-orange ja-typo-btn-big btn-big-orange" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-black ja-typo-btn-big btn-big-black" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-grey ja-typo-btn-big btn-big-grey" href="https://ja-graphite.demo.joomlart.com/#"><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="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-tip" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-warning" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-info" href="https://ja-graphite.demo.joomlart.com/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-ok" href="https://ja-graphite.demo.joomlart.com/#"><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="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-green ja-typo-btn-sm btn-sm-green" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-red ja-typo-btn-sm btn-sm-red" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-orange ja-typo-btn-sm btn-sm-orange" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-black ja-typo-btn-sm btn-sm-black" href="https://ja-graphite.demo.joomlart.com/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-grey ja-typo-btn-sm btn-sm-grey" href="https://ja-graphite.demo.joomlart.com/#"><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-2 clearfix"> <h2 class="ja-typo-title"><span>Form Fieldset</span></h2> <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> 2019-12-19T07:09:59+00:00 2019-12-19T07:09:59+00:00 https://ja-graphite.demo.joomlart.com/index.php/ja-graphites-typography/9-uncategorised/75-whats-new-in-16 Super User admin@joomlart.com

<p>The principal changes introduced in Joomla 1.6 are:</p> <ul> <li><strong>New Access Control System</strong> - Allows site administrators control over who can view and manage content.</li> <li><strong>Unlimited Depth Organizational Model</strong> - Gives site administrators and content creators user-defined category levels that allow for the creation of a category tree with as many or as few levels for organizing articles and other content as needed.</li> <li><strong>One-Click Extension Updates</strong> - Allows users to keep sites secure and controlled by simplifying the process of updating extensions.</li> <li><strong>Semantic XHTML Layouts</strong> - Provides a better baseline for content presentation.</li> </ul> <p>The following is a more complete list of changes.</p>

<p>The principal changes introduced in Joomla 1.6 are:</p> <ul> <li><strong>New Access Control System</strong> - Allows site administrators control over who can view and manage content.</li> <li><strong>Unlimited Depth Organizational Model</strong> - Gives site administrators and content creators user-defined category levels that allow for the creation of a category tree with as many or as few levels for organizing articles and other content as needed.</li> <li><strong>One-Click Extension Updates</strong> - Allows users to keep sites secure and controlled by simplifying the process of updating extensions.</li> <li><strong>Semantic XHTML Layouts</strong> - Provides a better baseline for content presentation.</li> </ul> <p>The following is a more complete list of changes.</p> 2019-12-19T07:09:59+00:00 2019-12-19T07:09:59+00:00 https://ja-graphite.demo.joomlart.com/index.php/menu-showcase Super User admin@joomlart.com

<div class="itemlist"> <p>Urna dui porttitor ut in Suspendisse vel neque augue interdum urna. Ipsum urna dis pretium sed massa et ut nec wisi ac. Et purus pellentesque semper eu rhoncus scelerisque dui Sed accumsan ligula. Sed tortor arcu odio eu enim sem tellus cursus ultrices hac. Dui ridiculus senectus facilisi convallis tortor quis ac neque Nam et. Semper Curabitur Nunc amet vitae malesuada.</p> </div>

<div class="itemlist"> <p>Urna dui porttitor ut in Suspendisse vel neque augue interdum urna. Ipsum urna dis pretium sed massa et ut nec wisi ac. Et purus pellentesque semper eu rhoncus scelerisque dui Sed accumsan ligula. Sed tortor arcu odio eu enim sem tellus cursus ultrices hac. Dui ridiculus senectus facilisi convallis tortor quis ac neque Nam et. Semper Curabitur Nunc amet vitae malesuada.</p> </div>