Statistic
Great flexibility with the usage of SVG and responsive design, the stats blocks are advanced features to present the stats of your business.
Graphic illustration #1
This chart uses the showArea option to draw line, dots but also an area shape.
For more detailed charts information, see Charts page.
Revenue
Total: 12 389 00 venueHTML:
<div class="bg-white shadow-sm rounded p-6">
<header class="d-flex justify-content-between align-items-center text-muted mb-4">
<h3 class="h6 font-weight-bold mb-0">Revenue</h3>
<small>Total: <strong class="font-size-14">12 389 00</strong> venue</small>
</header>
<div class="js-area-chart u-stats-v2 mb-4"
data-height="16rem"
data-mobile-height="16rem"
data-offset-x="30"
data-offset-y="0"
data-postfix="m"
data-is-show-area="true"
data-is-show-line="false"
data-is-show-point="true"
data-is-full-width="true"
data-is-stack-bars="true"
data-is-show-axis-x="false"
data-is-show-axis-y="true"
data-is-show-tooltips="true"
data-tooltip-description-position="center"
data-tooltip-custom-class="u-stats-v2__tooltip"
data-align-text-axis-x="center"
data-fill-opacity=".8"
data-fill-colors='["#ffc107", "#377dff"]'
data-stroke-width=".0625rem"
data-stroke-color="#f0f4f7"
data-stroke-dash-array="0"
data-text-size-x=".75rem"
data-text-color-x="#77838f"
data-text-offset-top-x="10"
data-text-size-y=".75rem"
data-text-color-y="#77838f"
data-points-colors='["#ffc107", "#377dff"]'
data-series='[[
{"meta": "Orders", "value": 2000},
{"meta": "Orders", "value": 6000},
{"meta": "Orders", "value": 5500},
{"meta": "Orders", "value": 7000},
{"meta": "Orders", "value": 6000},
{"meta": "Orders", "value": 7500}
], [
{"meta": "Visits", "value": 3000},
{"meta": "Visits", "value": 5000},
{"meta": "Visits", "value": 4000},
{"meta": "Visits", "value": 7000},
{"meta": "Visits", "value": 6500},
{"meta": "Visits", "value": 7000}
]]'
data-labels='["Jan", "Feb", "Apr", "May", "Jun", "Jul"]'></div>
<footer class="d-flex justify-content-start align-items-center text-muted">
<small class="d-inline-block mr-4">
<span class="fa fa-circle text-primary mr-1"></span>
Visitors
</small>
<small class="d-inline-block mr-4">
<span class="fa fa-circle text-warning mr-1"></span>
Orders
</small>
<div class="ml-auto">
<a class="btn btn-xs text-right u-btn-primary--air transition-3d-hover" href="#">Details</a>
</div>
</footer>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/chartist/dist/chartist.min.css">
<link rel="stylesheet" href="assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/chartist/dist/chartist.min.js"></script>
<script src="assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.chartist-area-chart.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of charts
$.HSCore.components.HSAreaChart.init('.js-area-chart');
});
</script>
Graphic illustration #2
HTML:
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4 mb-7 mb-lg-0">
<article class="bg-white shadow-sm rounded">
<header class="p-6">
<div class="d-flex justify-content-between align-items-center mb-3">
<small class="d-block text-muted">22 February, 2018</small>
<a class="u-icon u-icon--sm u-icon-primary--air rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
<span class="fa fa-cloud-download-alt u-icon__inner"></span>
</a>
</div>
<div class="media align-items-center">
<div class="d-flex mr-3">
<img class="img-fluid u-sm-avatar rounded-circle" src="../assets/vendor/flag-icon-css/flags/1x1/us.svg" alt="United States Flag">
</div>
<div class="media-body">
<h3 class="h6 mb-0">35, 298 USD</h3>
<a class="small text-success" href="#">
1.3649%
<span class="fa fa-angle-up ml-2"></span>
</a>
</div>
</div>
</header>
<hr class="my-0">
<div class="p-6">
<div class="row mb-7">
<div class="col-6">
<h4 class="small text-muted">
Goal: <strong class="text-secondary">$70,000</strong>
</h4>
<div class="js-hr-progress progress" style="height: 6px;">
<div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-6">
<h4 class="small text-muted">
Duration: <strong class="text-secondary">1 week</strong>
</h4>
<div class="js-hr-progress progress" style="height: 6px;">
<div class="js-hr-progress-bar progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="js-bar-chart"
data-series='[
[10,8,5,7,6,6,10,10,8,5,7,6,6,10,6,6,10,10,8,5,7,6,6,10,6,6,10,10,8]
]'
data-is-show-axis-x="false"
data-is-show-axis-y="false"
data-height="62px"
data-high="10"
data-low="0"
data-distance="5"
data-stroke-width="6"
data-stroke-color="#19a0ff"></div>
</div>
</article>
</div>
<div class="col-md-6 col-lg-4 mb-7 mb-lg-0">
<article class="bg-white shadow-sm rounded">
<header class="p-6">
<div class="d-flex justify-content-between align-items-center mb-3">
<small class="d-block text-muted">22 February, 2018</small>
<a class="u-icon u-icon--sm u-icon-primary--air rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
<span class="fa fa-cloud-download-alt u-icon__inner"></span>
</a>
</div>
<div class="media align-items-center">
<div class="d-flex mr-3">
<img class="img-fluid u-sm-avatar rounded-circle" src="../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United States Flag">
</div>
<div class="media-body">
<h3 class="h6 mb-0">27, 092 LP</h3>
<a class="small text-danger" href="#">
-4.812%
<span class="fa fa-angle-down ml-2"></span>
</a>
</div>
</div>
</header>
<hr class="my-0">
<div class="p-6">
<div class="row mb-7">
<div class="col-6">
<h4 class="small text-muted">
Goal: <strong class="text-secondary">$12,500</strong>
</h4>
<div class="js-hr-progress progress" style="height: 6px;">
<div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 12%;" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-6">
<h4 class="small text-muted">
Duration: <strong class="text-secondary">1 month</strong>
</h4>
<div class="js-hr-progress progress" style="height: 6px;">
<div class="js-hr-progress-bar progress-bar bg-warning" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="js-bar-chart"
data-series='[
[3,5,5,7,6,1,10,1,8,5,7,2,6,10,6,6,4,10,8,5,7,2,6,10,6,6,10,1,8]
]'
data-is-show-axis-x="false"
data-is-show-axis-y="false"
data-height="62px"
data-high="10"
data-low="0"
data-distance="5"
data-stroke-width="6"
data-stroke-color="#ec5245"></div>
</div>
</article>
</div>
<div class="col-md-6 col-lg-4 mb-7 mb-lg-0">
<article class="bg-white shadow-sm rounded">
<header class="p-6">
<div class="d-flex justify-content-between align-items-center mb-3">
<small class="d-block text-muted">22 February, 2018</small>
<a class="u-icon u-icon--sm u-icon-primary--air rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
<span class="fa fa-cloud-download-alt u-icon__inner"></span>
</a>
</div>
<div class="media align-items-center">
<div class="d-flex mr-3">
<img class="img-fluid u-sm-avatar rounded-circle" src="../assets/vendor/flag-icon-css/flags/1x1/de.svg" alt="United States Flag">
</div>
<div class="media-body">
<h3 class="h6 mb-0">7, 233 EURO</h3>
<a class="small text-danger" href="#">
-8.4%
<span class="fa fa-angle-down ml-2"></span>
</a>
</div>
</div>
</header>
<hr class="my-0">
<div class="p-6">
<div class="row mb-7">
<div class="col-6">
<h4 class="small text-muted">
Goal: <strong class="text-secondary">$45,500</strong>
</h4>
<div class="js-hr-progress progress" style="height: 6px;">
<div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-6">
<h4 class="small text-muted">
Duration: <strong class="text-secondary">3 weeks</strong>
</h4>
<div class="js-hr-progress progress" style="height: 6px;">
<div class="js-hr-progress-bar progress-bar bg-warning" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="js-bar-chart"
data-series='[
[2,3,5,7,4,6,5,6,8,7,7,6,6,10,6,6,10,7,8,5,7,6,3,10,6,6,1,3,1]
]'
data-is-show-axis-x="false"
data-is-show-axis-y="false"
data-height="62px"
data-high="10"
data-low="0"
data-distance="5"
data-stroke-width="6"
data-stroke-color="#fdd14e"></div>
</div>
</article>
</div>
</div>
CSS library:
<link rel="stylesheet" href="assets/vendor/chartist/dist/chartist.min.css">
<link rel="stylesheet" href="assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/appear.js"></script>
<script src="assets/vendor/chartist/dist/chartist.min.js"></script>
<script src="assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.progress-bar.js"></script>
<script src="assets/js/components/hs.chartist-bar-chart.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of horizontal progress bars
var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress', {
direction: 'horizontal',
indicatorSelector: '.js-hr-progress-bar'
});
// initialization of chartist bar charts
$.HSCore.components.HSChartistBarChart.init('.js-bar-chart');
});
</script>
Numbers #1
Top 25
One of the world's top research companies
100%
of our research is ranked at world standard or above
70+
research centres
Tripling
our investment in research
<div class="row">
<div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
<div class="u-stats-v1__content">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 187 187" enable-background="new 0 0 187 187" xml:space="preserve">
<g id="figuresV1SVG">
<circle class="u-fill-white" cx="93.5" cy="93.5" r="93.5"/>
<circle class="u-fill-white u-stroke-gray-50" stroke-width="7" stroke-miterlimit="10" cx="93.5" cy="93.5" r="81"/>
<path class="u-fill-none u-stroke-warning" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" d="M93.5,12.5
c44.7,0,81,36.3,81,81c0,21.3-8.2,40.6-21.6,55.1"/>
</g>
</svg>
</figure>
<div class="u-stats-v1__info">
<h4 class="h4 text-warning">Top 25</h4>
<p class="small mb-0">One of the world's top research companies</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
<div class="u-stats-v1__content">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 187 187" enable-background="new 0 0 187 187" xml:space="preserve">
<g id="figuresV2SVG">
<circle class="u-fill-white" cx="93.5" cy="93.5" r="93.5"/>
<circle class="u-fill-white u-stroke-gray-50" stroke-width="7" stroke-miterlimit="10" cx="93.5" cy="93.5" r="81"/>
<path class="u-fill-none u-stroke-primary" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" d="M93.5,12.5
c43,0,78.2,33.6,80.8,75.9"/>
</g>
</svg>
</figure>
<div class="u-stats-v1__info">
<h4 class="h4 text-primary">100%</h4>
<p class="small mb-0">of our research is ranked at world standard or above</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-7 mb-md-4">
<div class="u-stats-v1__content">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 187 187" enable-background="new 0 0 187 187" xml:space="preserve">
<g id="figuresV3SVG">
<circle class="u-fill-white" cx="93.5" cy="93.5" r="93.5"/>
<circle class="u-fill-white u-stroke-gray-50" stroke-width="7" stroke-miterlimit="10" cx="93.5" cy="93.5" r="81"/>
<path class="u-fill-none u-stroke-danger" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" d="M93.5,12.5
c26.7,0,50.4,12.9,65.2,32.9"/>
</g>
</svg>
</figure>
<div class="u-stats-v1__info">
<h4 class="h4 text-danger">70+</h4>
<p class="small mb-0">research centres</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-7 mb-md-4">
<div class="u-stats-v1__content">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 187 187" enable-background="new 0 0 187 187" xml:space="preserve">
<g id="figuresV4SVG">
<circle class="u-fill-white" cx="93.5" cy="93.5" r="93.5"/>
<circle class="u-fill-white u-stroke-gray-50" stroke-width="7" stroke-miterlimit="10" cx="93.5" cy="93.5" r="81"/>
<path class="u-fill-none u-stroke-success" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" d="M93.5,12.5
c44.7,0,81,36.3,81,81s-36.3,81-81,81c-26.3,0-49.7-12.6-64.5-32"/>
</g>
</svg>
</figure>
<div class="u-stats-v1__info">
<h4 class="h4 text-success">Tripling</h4>
<p class="small mb-0">our investment in research</p>
</div>
</div>
</div>
</div>
Numbers #2
25
Top rated
agency companies
$19
Historical earnings
per click
50%
Average
registration rate
<div class="row justify-content-center">
<div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
<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>
</div>
<div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
<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>
</div>
<div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
<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>
Numbers #3
<div class="container u-space-1">
<div class="row align-items-lg-center">
<div class="col-lg-3 mb-7 mb-lg-0">
<div class="media align-items-center">
<div class="d-flex mr-3">
<span class="u-icon u-icon--lg u-icon-warning--air rounded-circle">
<span class="fab fa-bitcoin u-icon__inner"></span>
</span>
</div>
<div class="media-body">
<h3 class="h5 mb-0">1 Bitcoin</h3>
<span class="d-block text-secondary text-uppercase">BTC</span>
</div>
</div>
</div>
<div class="col-lg-9">
<ul class="list-inline row justify-content-lg-end text-secondary text-uppercase mb-0">
<li class="list-inline-item col-6 col-sm-4 col-md-auto u-ver-divider u-ver-divider--xs u-ver-divider--none-md px-md-7 mx-0 mb-4 mb-md-0">
<small class="d-block">Market Cap</small>
<a class="d-block text-success" href="#">
1.3649%
<span class="fa fa-angle-up ml-2"></span>
</a>
</li>
<li class="list-inline-item col-6 col-sm-4 col-md-auto u-ver-divider u-ver-divider--xs u-ver-divider--none-md px-md-7 mx-0 mb-4 mb-md-0">
<small class="d-block">Price</small>
<a class="d-block text-danger" href="#">
-1.01%
<span class="fa fa-angle-down ml-2"></span>
</a>
</li>
<li class="list-inline-item col-6 col-sm-4 col-md-auto u-ver-divider u-ver-divider--xs u-ver-divider--none-md px-md-7 mx-0 mb-4 mb-md-0">
<small class="d-block">Volume <small>(24h)</small></small>
<a class="d-block text-success" href="#">
5.12%
<span class="fa fa-angle-up ml-2"></span>
</a>
</li>
<li class="list-inline-item col-6 col-sm-4 col-md-auto pl-md-7 mx-0 mb-4 mb-md-0">
<small class="d-block">Change <small>(24h)</small></small>
<a class="d-block text-danger" href="#">
-3.38%
<span class="fa fa-angle-down ml-2"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
Numbers #4
2M
2 million daily active users
7k
Over 7k open job positions
10M
Over 10 million stories shared
<!-- Stats Section -->
<div class="container">
<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-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-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-bold">10M</h3>
<p>Over 10 million stories shared</p>
</div>
<!-- End Figures -->
</div>
</div>
</div>
<!-- End Stats Section -->
Numbers #5
$45.99
Available balance
$1.32
Reward balance
$0.00
Pending balance
<!-- Stats -->
<div class="card-deck d-block d-lg-flex">
<!-- Card -->
<div class="card mb-3 mb-lg-0">
<div class="card-body p-5">
<div class="media">
<span class="u-icon u-icon-primary--air u-icon--xl rounded-circle mr-4">
<span class="fa fa-dollar-sign font-size-26 u-icon__inner"></span>
</span>
<div class="media-body">
<span class="d-block font-size-32">$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">
<span class="u-icon u-icon-success--air u-icon--xl rounded-circle mr-4">
<span class="fa fa-coins font-size-26 u-icon__inner"></span>
</span>
<div class="media-body">
<span class="d-block font-size-32">$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">
<span class="u-icon u-icon-warning--air u-icon--xl rounded-circle mr-4">
<span class="fa fa-exchange-alt font-size-26 u-icon__inner"></span>
</span>
<div class="media-body">
<span class="d-block font-size-32">$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 -->
Numbers #6
HTML:
<!-- Stats -->
<div class="card mb-7 mb-lg-0">
<div class="card-body pt-4 pb-5 px-5 mb-3 mb-md-0">
<!-- Title & Settings -->
<div class="d-flex justify-content-between align-items-center">
<h4 class="h6 mb-0">Deposits</h4>
<!-- Settings Dropdown -->
<div class="position-relative">
<a id="depositSettingsDropdownInvoker" class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent" href="javascript:;" role="button"
aria-controls="depositSettingsDropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#depositSettingsDropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fa fa-ellipsis-h u-icon__inner"></span>
</a>
<div id="depositSettingsDropdown" class="u-unfold right-0 text-left mt-2" aria-labelledby="depositSettingsDropdownInvoker" style="min-width: 190px;">
<a class="u-list__link" href="#">
<span class="fa fa-cogs min-width-3 text-center font-size-13 mr-2"></span>
Settings
</a>
<a class="u-list__link" href="#">
<span class="fa fa-cloud-download-alt min-width-3 text-center font-size-13 mr-2"></span>
Download
</a>
<a class="u-list__link" href="#">
<span class="fa fa-archive min-width-3 text-center font-size-13 mr-2"></span>
Archive
</a>
</div>
</div>
<!-- End Settings Dropdown -->
</div>
<!-- End Title & Settings -->
<hr class="mt-3 mb-4">
<!-- Deposit Info -->
<div class="row mb-5">
<div class="col-sm-6 mb-4 mb-sm-0">
<span class="align-top">$</span>
<span class="font-size-32 font-weight-medium text-lh-sm">50,102</span>
<div class="mb-1">
<span class="text-secondary font-size-14">Deposit:</span>
<span class="font-weight-medium font-size-14">$1,050</span>
</div>
<div>
<span class="text-primary font-weight-medium text-lh-sm">
<span class="fa fa-arrow-up text-success font-size-13"></span>
+2.1% ($122)
</span>
</div>
</div>
<div class="col-sm-6 align-self-end">
<!-- Pie Circle -->
<div class="js-pie text-center"
data-circles-value="54"
data-circles-max-value="100"
data-circles-bg-color="rgba(0, 201, 167, 0.1)"
data-circles-fg-color="#00c9a7"
data-circles-radius="50"
data-circles-stroke-width="4"
data-circles-additional-text="%"
data-circles-duration="2000"
data-circles-scroll-animate="true"
data-circles-color="#00c9a7"
data-circles-font-size="24"></div>
<!-- End Pie Circle -->
</div>
</div>
<button type="button" class="btn btn-block btn-sm btn-primary u-btn-primary transition-3d-hover">Add Funds</button>
<!-- End Deposit Info -->
</div>
<div class="card-footer p-5">
<!-- Progress Info -->
<div class="row align-items-center">
<div class="col-6 u-ver-divider">
<label class="small text-muted">Goal:</label>
<small class="font-weight-medium">$100k</small>
<div class="js-hr-progress progress" style="height: 4px;">
<div class="js-hr-progress-bar progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-6">
<label class="small text-muted">Duration:</label>
<small class="font-weight-medium">6 months</small>
<div class="js-hr-progress progress" style="height: 4px;">
<div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<!-- End Progress Info -->
</div>
</div>
<!-- End Stats -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/appear.js"></script>
<script src="assets/vendor/circles/circles.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.unfold.js"></script>
<script src="assets/js/components/hs.chart-pie.js"></script>
<script src="assets/js/components/hs.progress-bar.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
// initialization of chart pies
var items = $.HSCore.components.HSChartPie.init('.js-pie');
// initialization of horizontal progress bars
var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress', {
direction: 'horizontal',
indicatorSelector: '.js-hr-progress-bar'
});
});
</script>
Numbers #7
HTML:
<!-- Stats -->
<div class="card mb-7 mb-lg-0">
<div class="card-body pt-4 pb-5 px-5 mb-3 mb-md-0">
<!-- Title & Settings -->
<div class="d-flex justify-content-between align-items-center">
<h4 class="h6 mb-0">Balance</h4>
<!-- Settings Dropdown -->
<div class="position-relative">
<a id="balanceSettingsDropdownInvoker" class="u-icon u-icon-secondary--air u-icon--sm u-bg-transparent" href="javascript:;" role="button"
aria-controls="balanceSettingsDropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#balanceSettingsDropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fa fa-ellipsis-h u-icon__inner"></span>
</a>
<div id="balanceSettingsDropdown" class="u-unfold right-0 text-left mt-2" aria-labelledby="balanceSettingsDropdownInvoker" style="min-width: 190px;">
<a class="u-list__link" href="#">
<span class="fa fa-cogs min-width-3 text-center font-size-13 mr-2"></span>
Settings
</a>
<a class="u-list__link" href="#">
<span class="fa fa-cloud-download-alt min-width-3 text-center font-size-13 mr-2"></span>
Download
</a>
<a class="u-list__link" href="#">
<span class="fa fa-archive min-width-3 text-center font-size-13 mr-2"></span>
Archive
</a>
</div>
</div>
<!-- End Settings Dropdown -->
</div>
<!-- End Title & Settings -->
<hr class="mt-3 mb-4">
<!-- Balance Info -->
<div class="row align-items-center mb-4">
<div class="col-6 u-ver-divider">
<label class="d-block small text-muted mb-0">Available:</label>
<span class="font-weight-medium">$45.99</span>
</div>
<div class="col-6">
<label class="d-block small text-muted mb-0">Pending:</label>
<span class="font-weight-medium">$0.00</span>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="js-vr-progress u-progress-vertical rounded mb-2">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-center">
<h4 class="small mb-0">May</h4>
</div>
</div>
<div class="col-3">
<div class="js-vr-progress u-progress-vertical rounded mb-2">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-center">
<h4 class="small mb-0">Jun</h4>
</div>
</div>
<div class="col-3">
<div class="js-vr-progress u-progress-vertical rounded mb-2">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 23%;" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-center">
<h4 class="small mb-0">Jul</h4>
</div>
</div>
<div class="col-3">
<div class="js-vr-progress u-progress-vertical rounded mb-2">
<div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 39%;" aria-valuenow="39" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="text-center">
<h4 class="small mb-0">Aug</h4>
</div>
</div>
</div>
<!-- End Balance Info -->
</div>
</div>
<!-- End Stats -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/appear.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.unfold.js"></script>
<script src="assets/js/components/hs.progress-bar.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
// initialization of horizontal progress bars
var verticalProgressBars = $.HSCore.components.HSProgressBar.init('.js-vr-progress', {
direction: 'vertical',
indicatorSelector: '.js-vr-progress-bar'
});
});
</script>
Numbers #8
HTML:
<!-- Stats -->
<div class="bg-primary shadow-primary-sm rounded pt-4 pb-5 px-5">
<!-- Title & Settings -->
<div class="d-flex justify-content-between align-items-center">
<h4 class="h6 text-white mb-0">Referrals</h4>
<!-- Settings Dropdown -->
<div class="position-relative">
<a id="referralsSettingsDropdownInvoker" class="u-icon u-icon-light--air u-icon--sm u-bg-transparent" href="javascript:;" role="button"
aria-controls="referralsSettingsDropdown"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#referralsSettingsDropdown"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fa fa-ellipsis-h u-icon__inner"></span>
</a>
<div id="referralsSettingsDropdown" class="u-unfold right-0 text-left mt-2" aria-labelledby="referralsSettingsDropdownInvoker" style="min-width: 190px;">
<a class="u-list__link" href="#">
<span class="fa fa-cogs min-width-3 text-center font-size-13 mr-2"></span>
Settings
</a>
<a class="u-list__link" href="#">
<span class="fa fa-cloud-download-alt min-width-3 text-center font-size-13 mr-2"></span>
Download
</a>
<a class="u-list__link" href="#">
<span class="fa fa-archive min-width-3 text-center font-size-13 mr-2"></span>
Archive
</a>
</div>
</div>
<!-- End Settings Dropdown -->
</div>
<!-- End Title & Settings -->
<hr class="opacity-0_2 mt-3 mb-4">
<!-- Referral Info -->
<div class="py-2">
<div class="row">
<div class="col-6">
<div class="mb-3">
<span class="d-block u-text-light font-size-14">Overall:</span>
<span class="align-top text-white">$</span>
<span class="text-white font-size-32 font-weight-medium text-lh-sm">1,350</span>
</div>
<span class="u-text-light font-size-14">Monthly:</span>
<span class="text-white font-weight-medium font-size-14">$425</span>
</div>
<div class="col-6 align-self-end">
<!-- Pie Circle -->
<div class="js-pie text-center"
data-circles-value="54"
data-circles-max-value="100"
data-circles-bg-color="rgba(255, 255, 255, 0.1)"
data-circles-fg-color="#ffffff"
data-circles-radius="50"
data-circles-stroke-width="4"
data-circles-duration="2000"
data-circles-scroll-animate="true"
data-circles-color="#ffffff"
data-circles-font-size="24"></div>
<!-- End Pie Circle -->
</div>
</div>
</div>
<!-- End Referral Info -->
</div>
<!-- End Stats -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/appear.js"></script>
<script src="assets/vendor/circles/circles.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.unfold.js"></script>
<script src="assets/js/components/hs.chart-pie.js"></script>
<script src="assets/js/components/hs.progress-bar.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
// initialization of chart pies
var items = $.HSCore.components.HSChartPie.init('.js-pie');
// initialization of horizontal progress bars
var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress', {
direction: 'horizontal',
indicatorSelector: '.js-hr-progress-bar'
});
});
</script>
Info #1
Front project - July 2018 $250 per year
License purchased: 1
License assigned: 1
Change plan Edit/Remove LicenseTotal
$250/yearly
Payment method: Card ending in 9050
Will renew on: July 15, 2019
Edit Payment Details View InvoicesHTML:
<div class="card-deck d-block d-md-flex">
<div class="card mb-4 mb-md-0">
<!-- Card -->
<div class="card-body p-5">
<h4 class="h6">Front project - July 2018 <span class="u-label u-label--sm u-label--success">$250 per year</span></h4>
<p class="font-size-14 mb-0">License purchased: <span class="text-dark font-weight-medium">1</span></p>
<p class="font-size-14">License assigned: <span class="text-dark font-weight-medium">1</span></p>
<a class="btn btn-xs btn-primary u-btn-primary transition-3d-hover" href="#">Change plan</a>
<a class="btn btn-xs u-btn-secondary--air transition-3d-hover" href="#">Edit/Remove License</a>
</div>
<!-- End Card -->
</div>
<div class="card">
<!-- Card -->
<div class="card-body p-5">
<h4 class="h6">Total</h4>
<h5 class="font-weight-normal">$250/yearly</h5>
<p class="font-size-14 mb-0">Payment method: <span class="text-dark font-weight-medium">Card ending in 9050</span></p>
<p class="font-size-14">Will renew on: <span class="text-dark font-weight-medium">July 15, 2019</span></p>
<a class="btn btn-xs btn-primary u-btn-primary transition-3d-hover" href="#">Edit Payment Details</a>
<a class="btn btn-xs u-btn-secondary--air transition-3d-hover" href="#">View Invoices</a>
<!-- End Card -->
</div>
</div>
</div>