<div id="vtem_typography">
<p>This page presents most of typographical aspects of the site. <span class="vtem_highlight">Make your readers happy</span> with great Typography and User Experience!</p>
<div class="vtem-typo-blockswrap clearfix">
<h1>This is an Heading 1</h1>
<p>Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.</p>
<h2>This is an Heading 2.</h2>
<p>Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.</p>
<h3>This is an Heading 3</h3>
<p>Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.</p>
<h4>This is an Heading 4</h4>
<p>Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.</p>
<h5>This is an Heading 5</h5>
<p>Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.</p>
</div>
<div class="vtem-typo-blockswrap icons-styling">
<h1 class="vtem-typo-title"><span>Icons Style</span></h1>
<div class="vtem-typo-blockrow clearfix">
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon1 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon2 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon3 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon4 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon5 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon6 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon7 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon8 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon9 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
</div>
</div>
<div class="vtem-typo-blockswrap icons-styling">
<div class="vtem-typo-blockrow clearfix">
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon10 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon11 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon12 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon13 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon14 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon15 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon16 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon17 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon18 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon19 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon20 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon21 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
</div>
</div>
<div class="vtem-typo-blockswrap icons-styling">
<div class="vtem-typo-blockrow clearfix">
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon23 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon24 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon25 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon26 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon27 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon28 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon29 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon30 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon31 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon32 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon33 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon34 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon35 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon36 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon37 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon38 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
<div class="vtem-typo-block">
<div class="vtem-typo-blockct clearfix"><a class="icon-style icon39 size32" href="#" title="Icon Style"><span>icon</span></a></div>
</div>
</div>
</div>
<div class="vtem-typo-blockswrap clearfix">
<h1 class="vtem-typo-title"><span>Buttons &amp; Tags</span></h1>
<div class="vtem-typo-blockrow cols-1 clearfix">
<div class="vtem-typo-block">
<h2 class="vtem-typo-title"><span>Big-1 Buttons</span></h2>
<div class="vtem-typo-blockct clearfix"><a class="vtem-typo-btn btn-corner vtem-typo-btn-big btn-big-1 left" href="#"><span><span>Button Text</span></span></a> <a class="vtem-typo-btn btn-corner vtem-typo-btn-big btn-big-2 left" href="#"><span><span>Button Text</span></span></a> <a class="vtem-typo-btn btn-corner vtem-typo-btn-big btn-big-3 left" href="#"><span><span>Button Text</span></span></a> <a class="vtem-typo-btn btn-corner vtem-typo-btn-big btn-big-4 left" href="#"><span><span>Button Text</span></span></a></div>
</div>
<div class="vtem-typo-block">
<h2 class="vtem-typo-title"><span>Small-1 Buttons</span></h2>
<div class="vtem-typo-blockct clearfix"><a class="vtem-typo-btn btn-corner vtem-typo-btn-small btn-small-1 left" href="#"> <span><span>Button Text</span></span></a> <a class="vtem-typo-btn btn-corner vtem-typo-btn-small btn-small-2 left" href="#"> <span><span>Button Text</span></span></a> <a class="vtem-typo-btn btn-corner vtem-typo-btn-small btn-small-3 left" href="#"> <span><span>Button Text</span></span></a> <a class="vtem-typo-btn btn-corner vtem-typo-btn-small btn-small-4 left" href="#"> <span><span>Button Text</span></span></a></div>
</div>
<div class="vtem-typo-block">
<h2 class="vtem-typo-title"><span>Rounded Big-1 Buttons</span></h2>
<div class="vtem-typo-blockct clearfix"><a class="vtem-typo-btn btn-rounded vtem-typo-btn-big btn-blue left" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn btn-rounded vtem-typo-btn-big btn-green left" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn btn-rounded vtem-typo-btn-small btn-blue left" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn btn-rounded vtem-typo-btn-small btn-green left" href="#"><span>Button Text</span></a></div>
</div>
</div>
<div class="vtem-typo-blockrow cols-1 clearfix">
<div class="vtem-typo-block">
<h2 class="vtem-typo-title"><span>Big-2 Buttons</span></h2>
<div class="vtem-typo-blockct clearfix"><a class="vtem-typo-btn-2 btn-blue-2 vtem-typo-btn-big-2 btn-big-blue" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-green-2 vtem-typo-btn-big-2 btn-big-green" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-red-2 vtem-typo-btn-big-2 btn-big-red" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-orange-2 vtem-typo-btn-big-2 btn-big-orange" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-black-2 vtem-typo-btn-big-2 btn-big-black" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-grey-2 vtem-typo-btn-big-2 btn-big-grey" href="#"><span>Button Text</span></a></div>
</div>
<div class="vtem-typo-block">
<h2 class="vtem-typo-title"><span>Small-2 Buttons</span></h2>
<div class="vtem-typo-blockct clearfix"><a class="vtem-typo-btn-2 btn-blue-2 vtem-typo-btn-sm-2 btn-sm-blue" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-green-2 vtem-typo-btn-sm-2 btn-sm-green" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-red-2 vtem-typo-btn-sm-2 btn-sm-red" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-orange-2 vtem-typo-btn-sm-2 btn-sm-orange" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-black-2 vtem-typo-btn-sm-2 btn-sm-black" href="#"><span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-grey-2 vtem-typo-btn-sm-2 btn-sm-grey" href="#"><span>Button Text</span></a></div>
</div>
<div class="vtem-typo-block">
<h2 class="vtem-typo-title"><span>Icon Buttons</span></h2>
<div class="vtem-typo-blockct clearfix"><a class="vtem-typo-btn-2 vtem-typo-btn-icn btn-icn-save" href="#"><span><span>Button Text</span></span></a> <a class="vtem-typo-btn-2 vtem-typo-btn-icn btn-icn-tip" href="#"><span><span>Button Text</span></span></a> <a class="vtem-typo-btn-2 vtem-typo-btn-icn btn-icn-warning" href="#"><span><span>Button Text</span></span></a> <a class="vtem-typo-btn-2 vtem-typo-btn-icn btn-icn-info" href="#"><span><span>Button Text</span></span></a> <a class="vtem-typo-btn-2 vtem-typo-btn-icn btn-icn-ok" href="#"><span><span>Button Text</span></span></a></div>
</div>
</div>
<div class="vtem-typo-blockrow cols-1 clearfix">
<div class="vtem-typo-block">
<h2 class="vtem-typo-title"><span>Rounded Big-2 Buttons</span></h2>
<div class="vtem-typo-blockct clearfix"><a class="vtem-typo-btn-2 btn-rounded-big btn-blue-2 vtem-typo-btn-big-2 btn-big-blue" href="#"> <span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-rounded-big btn-green-2 vtem-typo-btn-big-2 btn-big-green" href="#"> <span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-rounded-big btn-red-2 vtem-typo-btn-big-2 btn-big-red" href="#"> <span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-rounded-big btn-orange-2 vtem-typo-btn-big-2 btn-big-orange" href="#"> <span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-rounded-big btn-black-2 vtem-typo-btn-big-2 btn-big-black" href="#"> <span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-rounded-big btn-grey-2 vtem-typo-btn-big-2 btn-big-grey" href="#"> <span>Button Text</span></a></div>
</div>
<div class="vtem-typo-block">
<h2 class="vtem-typo-title"><span>Rounded Small-2 Buttons</span></h2>
<div class="vtem-typo-blockct clearfix"><a class="vtem-typo-btn-2 btn-rounded-sm btn-blue-2 vtem-typo-btn-sm-2 btn-sm-blue" href="#"> <span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-rounded-sm btn-green-2 vtem-typo-btn-sm-2 btn-sm-green" href="#"> <span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-rounded-sm btn-red-2 vtem-typo-btn-sm-2 btn-sm-red" href="#"> <span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-rounded-sm btn-orange-2 vtem-typo-btn-sm-2 btn-sm-orange" href="#"> <span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-rounded-sm btn-black-2 vtem-typo-btn-sm-2 btn-sm-black" href="#"> <span>Button Text</span></a> <a class="vtem-typo-btn-2 btn-rounded-sm btn-grey-2 vtem-typo-btn-sm-2 btn-sm-grey" href="#"> <span>Button Text</span></a></div>
</div>
<div class="vtem-typo-block">
<h2 class="vtem-typo-title"><span>Rounded Icon Buttons</span></h2>
<div class="vtem-typo-blockct clearfix"><a class="vtem-typo-btn-2 btn-rounded-icn vtem-typo-btn-icn btn-icn-save" href="#"> <span><span>Button Text</span></span></a> <a class="vtem-typo-btn-2 btn-rounded-icn vtem-typo-btn-icn btn-icn-tip" href="#"> <span><span>Button Text</span></span></a> <a class="vtem-typo-btn-2 btn-rounded-icn vtem-typo-btn-icn btn-icn-warning" href="#"> <span><span>Button Text</span></span></a> <a class="vtem-typo-btn-2 btn-rounded-icn vtem-typo-btn-icn btn-icn-info" href="#"> <span><span>Button Text</span></span></a> <a class="vtem-typo-btn-2 btn-rounded-icn vtem-typo-btn-icn btn-icn-ok" href="#"> <span><span>Button Text</span></span></a></div>
</div>
</div>
<div class="vtem-typo-blockrow cols-2 clearfix">
<div class="vtem-typo-block">
<h2 class="vtem-typo-title"><span>Squared Tags</span></h2>
<div class="vtem-typo-blockct clearfix">
<p>This is a sample <span class="vtem-typo-tag tag-grey">Inline Tag</span>. Use this to provide useful.</p>
<p>This is a sample <span class="vtem-typo-tag tag-blue">Inline Tag</span>. Use this to provide useful.</p>
<p>This is a sample <span class="vtem-typo-tag tag-green">Inline Tag</span>. Use this to provide useful.</p>
<p>This is a sample <span class="vtem-typo-tag tag-red">Inline Tag</span>. Use this to provide useful.</p>
<p>This is a sample <span class="vtem-typo-tag tag-orange">Inline Tag</span>. Use this to provide useful.</p>
<p>This is a sample <span class="vtem-typo-tag tag-black">Inline Tag</span>. Use this to provide useful.</p>
</div>
</div>
<div class="vtem-typo-block">
<h2 class="vtem-typo-title"><span>Rounded Tags</span></h2>
<div class="vtem-typo-blockct clearfix">
<p>This is a sample <span class="vtem-typo-tag tag-rounded tag-grey">Inline Tag</span>. Use this to provide.</p>
<p>This is a sample <span class="vtem-typo-tag tag-rounded tag-blue">Inline Tag</span>. Use this to provide.</p>
<p>This is a sample <span class="vtem-typo-tag tag-rounded tag-green">Inline Tag</span>. Use this to provide.</p>
<p>This is a sample <span class="vtem-typo-tag tag-rounded tag-red">Inline Tag</span>. Use this to provide.</p>
<p>This is a sample <span class="vtem-typo-tag tag-rounded tag-orange">Inline Tag</span>. Use this to provide.</p>
<p>This is a sample <span class="vtem-typo-tag tag-rounded tag-black">Inline Tag</span>. Use this to provide.</p>
</div>
</div>
</div>
</div>
</div>