Get typography displayed in your site
Purity III provides variety of typo that will save your time to build your conent and make your content look great. We put all typos used to build Purity III content to typo page (all menu items under Typography menu item).
Note:
Purity III integrates Bootstrap 3 so it supports all Bootstrap 3 typo.
Step 1: get markup of typo
There are multiple ways to get markup of typo.
#1: using Firebug
#2: using quickstart package
We provide a quickstart package that include sample data so that when you install, your site will be the same with Purity III demo. When you have the site, just login back-end and get the markup of typo from articles, custom HTML module.
#3: using demo builder
We provide a quickstart package that include sample data so that when you install, your site will be the same with Purity III demo. When you have the site, just login back-end and get the markup of typo from articles, custom HTML module.
Step 2: add markup of typo to your content
You can add the typo markup to content field of article or custom HTML module.
Turn off editor:
When you add HTML code to content - article, please make sure you turn the Editor off. Go to Sytem >> Global confoguration, select Editor - None in the field Default editor.
Step 3: get the typo displayed in front-page
Create a menu, assign to the article we added typo markup to.
Supported typography pages
The pre-made typo will save your time when you build your site content.
Our Team page
HTML code
<div class="our-team">
<div class="page-header">
<h1 class="text-center">Welcome to our team</h1>
</div>
<p class="lead text-center">
Quis non leo condimentum lacinia vestibulum justo malesuada Sed non pellentesque. Enim neque tortor mattis sed semper lorem tellus Phasellus eu nonummy. Vel Vestibulum leo hendrerit et mauris vitae consequat sem rutrum hac. Phasellus id cursus malesuada libero dui Morbi senectus diam gravida Vestibulum.
</p>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/images/joomlart/corporate/staff-1.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/images/joomlart/corporate/staff-2.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Bennie Moran</h3>
<p>Developer</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/images/joomlart/corporate/staff-3.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Nicholas Mitchell</h3>
<p>Developer</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/images/joomlart/corporate/staff-4.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Nicholas Mitchell</h3>
<p>Designer.</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/images/joomlart/corporate/staff-5.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Sean Thomas</h3>
<p>Tester</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/images/joomlart/corporate/staff-6.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Bennie Moran</h3>
<p>Senior Project Manager</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/images/joomlart/corporate/staff-7.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Nicholas Mitchell</h3>
<p>Project manager</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/images/joomlart/corporate/staff-8.jpg" alt="Sample image" class="img-circle" />
<div class="caption">
<h3>Nicholas Mitchell</h3>
<p>Community manager.</p>
<p>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-facebook"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a role="button" class="btn btn-default" href="#"><i class="fa fa-google-plus"></i></a>
</p>
</div>
</div>
</div>
</div>
Pricing table page
We provide 3 pre-made styles for pricing table, select the style you want.
1. Style 1
HTML code
<div class="page-header text-center">
<h1>Pricing table - style 1</h1>
</div>
<div class="pricing-table style1 row">
<div class="col col-md-4 no-padding">
<div class="col-header text-center">
<h2>Personal</h2>
<p>Perfect for your blog</p>
</div>
<div class="col-body">
<ul>
<li class="row0 yes">Unlimited bandwidth</li>
<li class="row1 yes">Unlimited products</li>
<li class="row0 yes">1 GB File storage</li>
<li class="row1 yes">2.0% Transaction fee</li>
<li class="row0 yes">Discount code engine</li>
<li class="row1 yes">24x7 Phone support</li>
<li class="row0 no">Gift cards</li>
<li class="row1 no">Abandoned cart recovery</li>
<li class="row0 no">Professional reports</li>
<li class="row1 no">Advanced report builder</li>
<li class="row0"><span class="big-number"><sup>$</sup>34<sup>.99</sup></span></li>
</ul>
</div>
<div class="col-footer text-center">
<a class="btn btn-lg btn-default">Sign up</a>
</div>
</div>
<div class="col col-md-4 col-feature shadow no-padding">
<div class="col-header text-center">
<h2>Portfolio</h2>
<p>Everything you need</p>
</div>
<div class="col-body">
<ul>
<li class="row0 yes">Unlimited bandwidth</li>
<li class="row1 yes">Unlimited products</li>
<li class="row0 yes">1 GB File storage</li>
<li class="row1 yes">2.0% Transaction fee</li>
<li class="row0 yes">Discount code engine</li>
<li class="row1 yes">24x7 Phone support</li>
<li class="row0 yes">Gift cards</li>
<li class="row1 yes">Abandoned cart recovery</li>
<li class="row0 yes">Professional reports</li>
<li class="row1 yes">Advanced report builder</li>
<li class="row0 yes">Real-time carrier shipping</li>
<li class="row0"><span class="big-number"><sup>$</sup>54<sup>.99</sup></span></li>
</ul>
</div>
<div class="col col-footer text-center">
<a class="btn btn-lg btn-primary">Sign up</a>
</div>
</div>
<div class="col col-md-4 no-padding">
<div class="col-header text-center">
<h2>Performance</h2>
<p>Awesome capacity</p>
</div>
<div class="col-body">
<ul>
<li class="row0 yes">Unlimited bandwidth</li>
<li class="row1 yes">Unlimited products</li>
<li class="row0 yes">1 GB File storage</li>
<li class="row1 yes">2.0% Transaction fee</li>
<li class="row0 no">Discount code engine</li>
<li class="row1 yes">24x7 Phone support</li>
<li class="row0 yes">Gift cards</li>
<li class="row1 no">Abandoned cart recovery</li>
<li class="row0 no">Professional reports</li>
<li class="row1 no">Advanced report builder</li>
<li class="row0"><span class="big-number"><sup>$</sup>45<sup>.99</sup></span></li>
</ul>
</div>
<div class="col-footer text-center">
<a class="btn btn-lg btn-default">Sign up</a>
</div>
</div>
</div>
Front-end appearance
2. Style 2
HTML code
<div class="page-header text-center">
<h1>Pricing table - style 2</h1>
</div>
<div class="pricing-table style2 row">
<div class="col col-md-4 no-padding">
<div class="col-header text-center">
<h2>Personal</h2>
<p><span class="big-number"><sup>$</sup>34<sup>.99</sup></span></p>
</div>
<div class="col-body">
<ul>
<li class="row0 yes">Unlimited bandwidth</li>
<li class="row1 yes">Unlimited products</li>
<li class="row0 yes">1 GB File storage</li>
<li class="row1 yes">2.0% Transaction fee</li>
<li class="row0 yes">Discount code engine</li>
<li class="row1 yes">24x7 Phone support</li>
<li class="row0 no">Gift cards</li>
<li class="row1 no">Abandoned cart recovery</li>
<li class="row0 no">Professional reports</li>
<li class="row1 no">Advanced report builder</li>
</ul>
</div>
<div class="col-footer text-center">
<a class="btn btn-lg btn-default">Sign up</a>
</div>
</div>
<div class="col col-md-4 col-feature shadow no-padding">
<div class="col-header text-center">
<h2>Portfolio</h2>
<p><span class="big-number"><sup>$</sup>54<sup>.99</sup></span></p>
</div>
<div class="col-body">
<ul>
<li class="row0 yes">Unlimited bandwidth</li>
<li class="row1 yes">Unlimited products</li>
<li class="row0 yes">1 GB File storage</li>
<li class="row1 yes">2.0% Transaction fee</li>
<li class="row0 yes">Discount code engine</li>
<li class="row1 yes">24x7 Phone support</li>
<li class="row0 yes">Gift cards</li>
<li class="row1 yes">Abandoned cart recovery</li>
<li class="row0 yes">Professional reports</li>
<li class="row1 yes">Advanced report builder</li>
<li class="row0 yes">Real-time carrier shipping</li>
</ul>
</div>
<div class="col-footer text-center">
<a class="btn btn-lg btn-primary">Sign up</a>
</div>
</div>
<div class="col col-md-4 no-padding">
<div class="col-header text-center">
<h2>Performance</h2>
<p><span class="big-number"><sup>$</sup>45<sup>.99</sup></span></p>
</div>
<div class="col-body">
<ul>
<li class="row0 yes">Unlimited bandwidth</li>
<li class="row1 yes">Unlimited products</li>
<li class="row0 yes">1 GB File storage</li>
<li class="row1 yes">2.0% Transaction fee</li>
<li class="row0 no">Discount code engine</li>
<li class="row1 yes">24x7 Phone support</li>
<li class="row0 yes">Gift cards</li>
<li class="row1 no">Abandoned cart recovery</li>
<li class="row0 no">Professional reports</li>
<li class="row1 no">Advanced report builder</li>
</ul>
</div>
<div class="col-footer text-center">
<a class="btn btn-lg btn-default">Sign up</a>
</div>
</div>
</div>
Front-end appearance
3. Style 3
HTML code
<div class="page-header text-center">
<h1>Pricing table - style 3</h1>
</div>
<div class="pricing-table style3">
<div class="row row-header">
<div class="col col-md-3 no-padding"></div>
<div class="col col-md-3 no-padding">
<div class="col-header text-center">
<h2>Personal</h2>
<p><span class="big-number"><sup>$</sup>34<sup>.99</sup></span></p>
</div>
</div>
<div class="col col-md-3 col-feature no-padding">
<div class="col-header text-center">
<h2>Portfolio</h2>
<p><span class="big-number"><sup>$</sup>54<sup>.99</sup></span></p>
</div>
</div>
<div class="col col-md-3 no-padding">
<div class="col-header text-center">
<h2>Performance</h2>
<p><span class="big-number"><sup>$</sup>45<sup>.99</sup></span></p>
</div>
</div>
</div>
<div class="row row-body">
<div class="col col-md-3 no-padding">
<ul>
<li class="row0 yes">Unlimited bandwidth</li>
<li class="row1 yes">Unlimited products</li>
<li class="row0 yes">1 GB File storage</li>
<li class="row1 yes">2.0% Transaction fee</li>
<li class="row0">Discount code engine</li>
<li class="row1">24x7 Phone support</li>
<li class="row0">Gift cards</li>
<li class="row1">Abandoned cart recovery</li>
<li class="row0">Professional reports</li>
<li class="row1">Advanced report builder</li>
<li class="row0">Advanced report builder</li>
</ul>
</div>
<div class="col col-md-3 no-padding">
<ul>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1 no"><i class="fa fa-times-circle"></i></li>
<li class="row0 no"><i class="fa fa-times-circle"></i></li>
<li class="row1 no"><i class="fa fa-times-circle"></i></li>
<li class="row0 no"><i class="fa fa-times-circle"></i></li>
</ul>
<div class="col-footer text-center">
<a href="#" title="Sign up" class="btn btn-lg btn-default">Sign up</a>
</div>
</div>
<div class="col col-md-3 no-padding">
<ul>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0"><i class="fa fa-check-circle"></i></li>
</ul>
<div class="col-footer text-center">
<a href="#" title="Sign up" class="btn btn-lg btn-primary">Sign up</a>
</div>
</div>
<div class="col col-md-3 no-padding">
<ul>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0"><i class="fa fa-check-circle"></i></li>
<li class="row1"><i class="fa fa-check-circle"></i></li>
<li class="row0 no"><i class="fa fa-times-circle"></i></li>
<li class="row1 no"><i class="fa fa-times-circle"></i></li>
<li class="row0 no"><i class="fa fa-times-circle"></i></li>
</ul>
<div class="col-footer text-center">
<a href="#" title="Sign up" class="btn btn-lg btn-default">Sign up</a>
</div>
</div>
</div>
</div>
Front-end appearance
Support policy
There are 2 styles for the support policy page. We will provide HTML code for both pages.
1. Support policy - style 1
HTML code
<div class="support-policy">
<div class="row row-support-policy">
<div class="col-md-4">
<div class="policy-item">
<div class="col-type">
<h3>Demo site display</h3>
</div>
<div class="col-detail">
<p>Your site does not look like our demo site? No problem, provide us your site details and we will help you. Temporary login info if provided makes this task a breeze. Login info can be submitted even in our forums in the hidden fields (mods eyes only).</p>
</div>
<div class="col-level level-1">
<div class="level-info">
<span class="face"></span>
<span class="count-up">100%</span>
</div>
<strong>Excellent</strong>
</div>
</div>
</div> <!-- End col -->
<div class="col-md-4">
<div class="policy-item">
<div class="col-type">
<h3>Bugs</h3>
</div>
<div class="col-detail">
<p>We hate bugs and act swiftly to crush them. Provide us steps to replicate the bug and let us do the rest.</p>
</div>
<div class="col-level level-1">
<div class="level-info">
<span class="face"></span>
<span class="count-up">90%</span>
</div>
<strong>Excellent</strong>
</div>
</div>
</div> <!-- End col -->
<div class="col-md-4">
<div class="policy-item">
<div class="col-type">
<h3>New feature requests</h3>
</div>
<div class="col-detail">
<p>As long as the feature will add value to the product and is requested by others too, we will add them.</p>
</div>
<div class="col-level level-2">
<div class="level-info">
<span class="face"></span>
<span class="count-up">80%</span>
</div>
<strong>Maybe, maybe not</strong>
</div>
</div>
</div> <!-- End col -->
</div> <!-- End row -->
<div class="row row-support-policy">
<div class="col-md-4">
<div class="policy-item">
<div class="col-type">
<h3>Customizations</h3>
</div>
<div class="col-detail">
<p>Limited customization support is available only for developers. For regular members minor customization requests may be fulfilled depending upon the workload and staff discretion.</p>
</div>
<div class="col-level level-2">
<div class="level-info">
<span class="face"></span>
<span class="count-up">80%</span>
</div>
<strong>Limited</strong>
</div>
</div>
</div> <!-- End col -->
<div class="col-md-4">
<div class="policy-item">
<div class="col-type">
<h3>3rd party extensions issue</h3>
</div>
<div class="col-detail">
<p>Lets face it, while we do test our templates with popular extensions at random but its not possible to cover all of them. So, our take on this is very clear : if it works in Joomla default templates but not in our templates, we will try our best to fix it, provided the 3rd party extension developer is using standard unmodified dependent libraries.</p>
</div>
<div class="col-level level-3">
<div class="level-info">
<span class="face"></span>
<span class="count-up">75%</span>
</div>
<strong>Very Good</strong>
</div>
</div>
</div> <!-- End col-->
<div class="col-md-4">
<div class="policy-item">
<div class="col-type">
<h3>Old versions</h3>
</div>
<div class="col-detail">
<p>We recommend using the latest versions of products in your site but we also understand that its not possible everytime. If provided with full details, screenshots and temporary login details, we can have a look and try to help.</p>
</div>
<div class="col-level level-3">
<div class="level-info">
<span class="face"></span>
<span class="count-up">70%</span>
</div>
<strong>Tricky</strong>
</div>
</div>
</div> <!-- End col -->
</div> <!-- End row -->
<div class="row row-support-policy">
<div class="col-md-4">
<div class="policy-item">
<div class="col-type">
<h3>Adding module positions or layout changes</h3>
</div>
<div class="col-detail">
<p>As long as it does not fall under customization expect good support. Please note, sometimes the template concept can be restrictive, for example : we cant help to add module position in JA Smashboard which is horizontal scrolling as it may break responsive layouts.</p>
</div>
<div class="col-level level-4">
<div class="level-info">
<span class="face"></span>
<span class="count-up">40%</span>
</div>
<strong>Maybe, maybe not</strong>
</div>
</div>
</div> <!-- End col -->
<div class="col-md-4">
<div class="policy-item">
<div class="col-type">
<h3>Javascript conflicts</h3>
</div>
<div class="col-detail">
<p>We understand that javascripts conflict can put the whole site purpose in limbo. We always help user investigate such issues and if it can be fixed from our side, we always fix them. If we express helplessness due to 3rd party extension issues, you will have to take it up with them. We are always ready to work with others to resolve such issues.</p>
</div>
<div class="col-level level-4">
<div class="level-info">
<span class="face"></span>
<span class="count-up">30%</span>
</div>
<strong>Maybe, maybe not</strong>
</div>
</div>
</div> <!-- End col -->
<div class="col-md-4">
<div class="policy-item">
<div class="col-type">
<h3>Ping Pong</h3>
</div>
<div class="col-detail">
<p>We hate it. We can not provide efficient support if you post single line poorly formatted questions without detailed description of the issue faced. You will only get blunt wild guesses as replies, not to mention the prolonged resolution time. Help us to help you.</p>
</div>
<div class="col-level level-5">
<div class="level-info">
<span class="face"></span>
<span class="count-up">20%</span>
</div>
<strong>ignored</strong>
</div>
</div>
</div> <!-- End col -->
</div> <!-- End row -->
<div class="row row-support-policy">
<div class="col-md-4">
<div class="policy-item">
<div class="col-type">
<h3>Server & Hosting</h3>
</div>
<div class="col-detail">
<p>We can only help to point out issues, beyond that its between you and your hosting provider.</p>
</div>
<div class="col-level level-6">
<div class="level-info">
<span class="face"></span>
<span class="count-up">0%</span>
</div>
<strong>Very very limited</strong>
</div>
</div>
</div> <!-- End col -->
</div> <!-- End row -->
</div> <!-- End support policy -->
Front-end appearance
2. Support policy - style 2
HTML code
<div class="support-policy style2">
<div class="row-heading hidden-phone">
<div class="col-md-2 text-center">Query type</div>
<div class="col-md-6">Details</div>
<div class="col-md-2 text-center">Support level</div>
<div class="col-md-2 text-center">Status</div>
</div>
<div class="row-body level-1">
<div class="col-md-2 col-type">
Demo site display
</div>
<div class="col-md-6 col-detail">
Lorem ipsum dolor sit amet consectetuer adipiscing id ac Mauris laoreet. Donec Vestibulum Curabitur eros Sed iaculis cursus amet sollicitudin elit ut. Nibh mus malesuada tincidunt In risus nibh Sed cursus adipiscing et.
</div>
<div class="col-md-2 col-level"><span class="number">100%</span></div>
<div class="col-md-2 col-status"><span class="face"></span><strong>Excellent</strong></div>
</div>
<div class="row-body level-2 row-alt">
<div class="col-md-2 col-type">
Bugs
</div>
<div class="col-md-6 col-detail">
Dictum Sed porttitor Nam cursus Curabitur Aenean et at nec penatibus. Laoreet ipsum Vestibulum magna malesuada pede felis augue adipiscing magnis adipiscing. Elit senectus nibh quis pellentesque at ultrices platea gravida <a href="#" title="Sample link">adipiscing dapibus.</a>
</div>
<div class="col-md-2 col-level"><span class="number">90%</span></div>
<div class="col-md-2 col-status"><span class="face"></span><strong>Excellent</strong></div>
</div>
<div class="row-body level-3">
<div class="col-md-2 col-type">
New feature requests
</div>
<div class="col-md-6 col-detail">
Habitasse tempus dignissim leo In justo ante Ut vel a eu. Quis cursus Vestibulum eros libero pharetra at laoreet interdum egestas penatibus. Senectus vestibulum penatibus tortor Nam Duis ut Vivamus eu Quisque Ut. Libero natoque odio ipsum quis suscipit lorem at non elit magnis. Tortor wisi vel Nam laoreet Integer auctor dui gravida nulla convallis.
</div>
<div class="col-md-2 col-level"><span class="number">70%</span></div>
<div class="col-md-2 col-status"><span class="face"></span><strong>Tricky</strong></div>
</div>
<div class="row-body level-4 row-alt">
<div class="col-md-2 col-type">
Customizations
</div>
<div class="col-md-6 col-detail">
Nam enim id lacus Sed enim id Nulla tincidunt urna ultrices. Eget Curabitur Vestibulum urna dui at leo vestibulum magna eget dolor. Suspendisse convallis Nullam rhoncus aliquam non nec adipiscing at tellus elit. Magna ut Phasellus leo justo vel Nunc ut amet interdum convallis.
</div>
<div class="col-md-2 col-level"><span class="number">40%</span></div>
<div class="col-md-2 col-status"><span class="face"></span><strong>Maybe, maybe not</strong></div>
</div>
<div class="row-body level-5">
<div class="col-md-2 col-type">
3rd party extensions issue
</div>
<div class="col-md-6 col-detail">
Magna dolor risus sed ante hac ut congue facilisis sed elit. Vel neque urna nec et turpis pharetra enim fermentum pellentesque Nulla. Tempor Phasellus pellentesque ut tempus sollicitudin Aenean interdum ut faucibus enim.
</div>
<div class="col-md-2 col-level"><span class="number">25%</span></div>
<div class="col-md-2 col-status"><span class="face"></span><strong>negligble / ignored</strong></div>
</div>
<div class="row-body level-6 row-alt">
<div class="col-md-2 col-type">
Old versions
</div>
<div class="col-md-6 col-detail">
Consequat elit vel pretium tellus dui augue tellus eleifend vitae ridiculus. Ligula Suspendisse orci Sed Nulla neque Aliquam risus Vivamus lacinia justo. Mauris vel mauris ut interdum iaculis quis pede id sociis nibh.
</div>
<div class="col-md-2 col-level"><span class="number">0%</span></div>
<div class="col-md-2 col-status"><span class="face"></span><strong>Very very limited</strong></div>
</div>
</div>
Front-end appearance
