Pages de typographie prises en charge dans le tempalte purity III
La typo pré-fabriquée vous permettra d'économiser du temps lorsque vous générez votre contenu de site.
Page Our Team
Code HTML
<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>
page Pricing table (table de prix)
Joomlart fournit 3 styles pré-fabriquées pour la table de prix, sélectionnez le style souhaité.
1. Style 1
Code HTML
<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>
2. Style 2
Code HTML
<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>
3. Style 3
Code HTML
<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>
Support policy - Politique de support
Il existe 2 modèles pour la page de politique de support. Nous vous fournissons le code HTML pour les deux pages.
1. Support policy - Politique de support - 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 -->
2. Support policy – Politique de support - 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>