Statistics - Static
Great flexibility with the usage of SVG and responsive design, the stats blocks are advanced features to present the stats of your business.
Static #1
25
Top rated
agency companies
$19
Historical earnings
per click
50%
Average
registration rate
<!-- Stats Section -->
<div class="container space-2">
<div class="row justify-content-center">
<div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
<!-- Stats -->
<div class="text-center">
<div class="position-relative">
<div class="u-indicator-dots">
<h4 class="display-4 text-primary mb-0">25</h4>
</div>
</div>
<p class="mb-0">Top rated<br>agency companies</p>
</div>
<!-- End Stats -->
</div>
<div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
<!-- Stats -->
<div class="text-center">
<div class="position-relative">
<div class="u-indicator-dots">
<h4 class="display-4 text-primary mb-0">$19</h4>
</div>
</div>
<p class="mb-0">Historical earnings<br>per click</p>
</div>
<!-- End Stats -->
</div>
<div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
<!-- Stats -->
<div class="text-center">
<div class="position-relative">
<h4 class="display-4 text-primary mb-0">50%</h4>
</div>
<p class="mb-0">Average<br>registration rate</p>
</div>
</div>
</div>
<!-- End Stats -->
</div>
<!-- End Stats Section -->
Static #2
2M
2 million daily active users
7k
Over 7k open job positions
10M
Over 10 million stories shared
<!-- Stats Section -->
<div class="container space-2">
<div class="row justify-content-md-between">
<div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-0 mb-7 mb-lg-0">
<!-- Figures -->
<div class="text-center">
<h3 class="display-2 text-primary font-weight-semi-bold">2M</h3>
<p>2 million daily active users</p>
</div>
<!-- End Figures -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-0">
<!-- Figures -->
<div class="text-center">
<h3 class="display-2 text-primary font-weight-semi-bold">7k</h3>
<p>Over 7k open job positions</p>
</div>
<!-- End Figures -->
</div>
<div class="col-sm-6 col-lg-4">
<!-- Figures -->
<div class="text-center">
<h3 class="display-2 text-primary font-weight-semi-bold">10M</h3>
<p>Over 10 million stories shared</p>
</div>
<!-- End Figures -->
</div>
</div>
</div>
<!-- End Stats Section -->
Static #3
$45.99
Available balance
$1.32
Reward balance
$0.00
Pending balance
<!-- Stats -->
<div class="card-deck d-block d-lg-flex card-lg-gutters-3 mb-6">
<!-- Card -->
<div class="card mb-3 mb-lg-0">
<div class="card-body p-5">
<div class="media align-items-center">
<span class="btn btn-lg btn-icon btn-soft-primary rounded-circle mr-4">
<span class="fas fa-dollar-sign btn-icon__inner"></span>
</span>
<div class="media-body">
<span class="d-block font-size-3">$45.99</span>
<h2 class="h6 text-secondary font-weight-normal mb-0">Available balance</h2>
</div>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card mb-3 mb-lg-0">
<div class="card-body p-5">
<div class="media align-items-center">
<span class="btn btn-lg btn-icon btn-soft-success rounded-circle mr-4">
<span class="fas fa-coins btn-icon__inner"></span>
</span>
<div class="media-body">
<span class="d-block font-size-3">$1.32</span>
<h3 class="h6 text-secondary font-weight-normal mb-0">Reward balance</h3>
</div>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card">
<div class="card-body p-5">
<div class="media align-items-center">
<span class="btn btn-lg btn-icon btn-soft-warning rounded-circle mr-4">
<span class="fas fa-exchange-alt btn-icon__inner"></span>
</span>
<div class="media-body">
<span class="d-block font-size-3">$0.00</span>
<h3 class="h6 text-secondary font-weight-normal mb-0">Pending balance</h3>
</div>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Stats -->
Stats #4
4.7 out of 5 starts from 12k reviews.
On average 15,000 users signup everyday.
Over 1 million files shared in a single day.
<!-- Stats Section -->
<div class="container space-2">
<div class="row justify-content-lg-center">
<div class="col-md-4 mb-7 mb-lg-0">
<!-- Stats -->
<div class="u-indicator-vertical-line text-center px-md-3 px-lg-7">
<figure id="statsStars" class="svg-preloader ie-height-72 w-100 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/stars.svg" alt="SVG"
data-parent="#statsStars">
</figure>
<p class="mb-0"><span class="text-dark font-weight-semi-bold">4.7 out of 5 starts</span> from 12k reviews.</p>
</div>
<!-- End Stats -->
</div>
<div class="col-md-4 mb-7 mb-lg-0">
<!-- Stats -->
<div class="u-indicator-vertical-line text-center px-md-3 px-lg-7">
<div class="max-width-11 mx-auto mb-3">
<img class="img-fluid" src="../../assets/img/others/img2.png" alt="Image Description">
</div>
<p class="mb-0">On average <span class="text-dark font-weight-semi-bold">15,000</span> users signup everyday.</p>
</div>
<!-- End Stats -->
</div>
<div class="col-md-4">
<!-- Stats -->
<div class="text-center px-md-3 px-lg-7">
<figure id="statsSharingFiles" class="svg-preloader ie-height-72 w-100 max-width-10 mx-auto mb-3">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/sharing-files.svg" alt="SVG"
data-parent="#statsSharingFiles">
</figure>
<p>Over <span class="text-dark font-weight-semi-bold">1 million</span> files shared in a single day.</p>
</div>
<!-- End Stats -->
</div>
</div>
</div>
<!-- End Stats Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Stats #5
<!-- Stats Section -->
<div class="bg-light rounded mx-3 mx-md-8">
<div class="container space-2">
<div class="row justify-content-lg-center">
<div class="col-md-4 mb-7 mb-md-0">
<!-- Stats -->
<a class="d-block u-indicator-vertical-line text-center px-md-3" href="#">
<img class="u-clients mb-3" src="../../assets/svg/clients-logo/slack-original.svg" alt="Image Description">
<span class="d-block h2 text-dark font-weight-semi-bold">4.89 / 5</span>
<p>based on more than 35 real user reviews on Bootstrap Themes</p>
</a>
<!-- End Stats -->
</div>
<div class="col-md-4 mb-7 mb-md-0">
<!-- Stats -->
<a class="d-block u-indicator-vertical-line text-center px-md-3" href="#">
<img class="u-clients mb-3" src="../../assets/svg/clients-logo/fitbit-original.svg" alt="Image Description">
<span class="d-block h2 text-dark font-weight-semi-bold">$25,000</span>
<p>at your company's disposal after accepting your application</p>
</a>
<!-- End Stats -->
</div>
<div class="col-md-4">
<!-- Stats -->
<a class="d-block text-center px-md-3" href="#">
<img class="u-clients mb-3" src="../../assets/svg/clients-logo/hubspot-original.svg" alt="Image Description">
<span class="d-block h2 text-dark font-weight-semi-bold">40,000+</span>
<p>business owners use Front across all over the world</p>
</a>
<!-- End Stats -->
</div>
</div>
</div>
</div>
<!-- End Stats Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>