<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-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-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-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-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-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-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-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-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-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-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-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-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 id="formelements" action="#" method="post">
<p><label for="input">Sample Input 1</label> <br /> <input id="input" class="inputbox" name="input" type="text" /></p>
<p><label for="input2">Sample Input 2</label> <br /> <input id="input2" class="inputbox" name="input2" type="text" /></p>
<p><input id="radio" name="radio" type="radio" /><label for="radio">Sample Radio Input</label> <input id="checkbox" name="checkbox" 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="textfield">Sample Textarea Field:</label><br /> <input id="textfield" name="textfield" type="text" /></p>
<p><input id="button" class="button" name="button" type="submit" value="Submit" /> <input id="button2" class="button" name="button2" type="reset" value="Reset" /></p>
</form></div>
</div>
</div>
</div>
</div>