Pejabat Pendaftar, UPNM https://pendaftar.upnm.edu.my/index.php/83-demo-contents/typography 2025-11-04T09:55:00+00:00 Admin Web Jabatan Pendaftar Joomla! - Open Source Content Management 2012-08-14T02:26:04+00:00 2012-08-14T02:26:04+00:00 https://pendaftar.upnm.edu.my/index.php/83-demo-contents/typography/107-typography Super User 1

<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 class="quote-style1"> <p>This 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.</p> <small>Someone famous in Source Title</small> </blockquote> <blockquote class="quote-style2"> <p>This 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.!</p> <small>Someone famous in Source Title</small> </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 class="ja-ordered-list"> <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 class="ja-unordered-list"> <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 class="ja-definition-list"><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">&nbsp;</span>This is a sample <strong>Arrow list</strong>.</li> <li><span class="icon">&nbsp;</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">&nbsp;</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">&nbsp;</span>This is a sample <strong>Star list</strong>.</li> <li><span class="icon">&nbsp;</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">&nbsp;</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">&nbsp;</span>This is a sample <strong>Check list</strong>.</li> <li><span class="icon">&nbsp;</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">&nbsp;</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">I</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">II</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">III</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">i</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">ii</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">iii</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>Message Boxes &amp; Legend Styles</span></h1> <div class="ja-typo-blockrow cols-1 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-confirmation"><strong>This is a confirmation 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-error"><strong>This is a error message 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-warning"><strong>This is a warning 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-information"><strong>This is a information</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-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> <p class="ja-typo-box box-system"><strong>This is a system message 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-1 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-confirmation"><strong>This is a confirmation 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-error"><strong>This is a error message 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-warning"><strong>This is a warning 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-information"><strong>This is a information</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-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> <p class="ja-typo-box box-rounded box-system"><strong>This is a system message 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-1 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> <div class="ja-typo-blockrow cols-1 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> </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://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-big btn-big-orange" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-big btn-big-black" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-big btn-big-grey" href="https://pendaftar.upnm.edu.my/#"><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://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-tip" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-warning" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-info" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-ok" href="https://pendaftar.upnm.edu.my/#"><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://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-sm btn-sm-green" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-sm btn-sm-red" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-sm btn-sm-orange" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-sm btn-sm-black" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-sm btn-sm-grey" href="https://pendaftar.upnm.edu.my/#"><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://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-green ja-typo-btn-big btn-big-green" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-red ja-typo-btn-big btn-big-red" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-orange ja-typo-btn-big btn-big-orange" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-black ja-typo-btn-big btn-big-black" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-grey ja-typo-btn-big btn-big-grey" href="https://pendaftar.upnm.edu.my/#"><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://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-tip" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-warning" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-info" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-ok" href="https://pendaftar.upnm.edu.my/#"><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://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-green ja-typo-btn-sm btn-sm-green" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-red ja-typo-btn-sm btn-sm-red" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-orange ja-typo-btn-sm btn-sm-orange" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-black ja-typo-btn-sm btn-sm-black" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-grey ja-typo-btn-sm btn-sm-grey" href="https://pendaftar.upnm.edu.my/#"><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>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><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> <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" type="input" name="input" /></p> <p><label for="input">Sample Input 2</label> <br /> <input class="inputbox" type="input" name="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" rows="5" cols="80">Textarea text</textarea></p> <p><button class="button btn-submit">Submit Button</button> <button class="button btn-reset">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 { 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 class="quote-style1"> <p>This 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.</p> <small>Someone famous in Source Title</small> </blockquote> <blockquote class="quote-style2"> <p>This 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.!</p> <small>Someone famous in Source Title</small> </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 class="ja-ordered-list"> <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 class="ja-unordered-list"> <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 class="ja-definition-list"><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">&nbsp;</span>This is a sample <strong>Arrow list</strong>.</li> <li><span class="icon">&nbsp;</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">&nbsp;</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">&nbsp;</span>This is a sample <strong>Star list</strong>.</li> <li><span class="icon">&nbsp;</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">&nbsp;</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">&nbsp;</span>This is a sample <strong>Check list</strong>.</li> <li><span class="icon">&nbsp;</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">&nbsp;</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">I</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">II</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">III</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">i</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">ii</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">iii</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>Message Boxes &amp; Legend Styles</span></h1> <div class="ja-typo-blockrow cols-1 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-confirmation"><strong>This is a confirmation 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-error"><strong>This is a error message 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-warning"><strong>This is a warning 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-information"><strong>This is a information</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-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> <p class="ja-typo-box box-system"><strong>This is a system message 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-1 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-confirmation"><strong>This is a confirmation 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-error"><strong>This is a error message 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-warning"><strong>This is a warning 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-information"><strong>This is a information</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-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> <p class="ja-typo-box box-rounded box-system"><strong>This is a system message 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-1 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> <div class="ja-typo-blockrow cols-1 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> </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://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-big btn-big-orange" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-big btn-big-black" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-big btn-big-grey" href="https://pendaftar.upnm.edu.my/#"><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://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-tip" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-warning" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-info" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn ja-typo-btn-icn btn-icn-ok" href="https://pendaftar.upnm.edu.my/#"><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://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-green ja-typo-btn-sm btn-sm-green" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-red ja-typo-btn-sm btn-sm-red" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-orange ja-typo-btn-sm btn-sm-orange" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-black ja-typo-btn-sm btn-sm-black" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-grey ja-typo-btn-sm btn-sm-grey" href="https://pendaftar.upnm.edu.my/#"><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://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-green ja-typo-btn-big btn-big-green" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-red ja-typo-btn-big btn-big-red" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-orange ja-typo-btn-big btn-big-orange" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-black ja-typo-btn-big btn-big-black" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-big btn-grey ja-typo-btn-big btn-big-grey" href="https://pendaftar.upnm.edu.my/#"><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://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-tip" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-warning" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-info" href="https://pendaftar.upnm.edu.my/#"><span><span>Button Text</span></span></a> <a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-ok" href="https://pendaftar.upnm.edu.my/#"><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://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-green ja-typo-btn-sm btn-sm-green" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-red ja-typo-btn-sm btn-sm-red" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-orange ja-typo-btn-sm btn-sm-orange" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-black ja-typo-btn-sm btn-sm-black" href="https://pendaftar.upnm.edu.my/#"><span>Button Text</span></a> <a class="ja-typo-btn btn-rounded-sm btn-grey ja-typo-btn-sm btn-sm-grey" href="https://pendaftar.upnm.edu.my/#"><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>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><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> <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" type="input" name="input" /></p> <p><label for="input">Sample Input 2</label> <br /> <input class="inputbox" type="input" name="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" rows="5" cols="80">Textarea text</textarea></p> <p><button class="button btn-submit">Submit Button</button> <button class="button btn-reset">Reset Button</button></p> </form></div> </div> </div> </div> </div>