Statistics component - 2
COPY
<section class="">
<div class="container-fluid p-0 m-0">
<div class="row g-2">
<!-- Middle content start -->
<div class="col-md-10 me-auto">
<div class="h-100vn w-100 p-4">
<h1 class="fs-5">Dashboard</h1>
<div class="row g-3">
<div class="col-sm-3">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm">
<div class="card-body">
<div class="float-end">
<i class="bi bi-people-fill widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Customers</h5>
<h4 class="mt-3 mb-3 fw-medium">2,254</h4>
<p class="mb-0 text-muted">
<span class="text-success me-2"><i class="bi bi-arrow-up"></i>
5.27%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm">
<div class="card-body">
<div class="float-end">
<i class="bi bi-shop widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Orders</h5>
<h4 class="mt-3 mb-3 fw-medium">3,500</h4>
<p class="mb-0 text-muted">
<span class="text-danger me-2"><i class="bi bi-arrow-down"></i>
1.08%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm">
<div class="card-body">
<div class="float-end">
<i class="bi bi-currency-dollar widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Revenue</h5>
<h4 class="mt-3 mb-3 fw-medium">$6,254</h4>
<p class="mb-0 text-muted">
<span class="text-success me-2"><i class="bi bi-arrow-up"></i>
1.27%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm">
<div class="card-body">
<div class="float-end">
<i class="bi bi-activity widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Growth</h5>
<h4 class="mt-3 mb-3 fw-medium">+ 1.56%</h4>
<p class="mb-0 text-muted">
<span class="text-danger me-2"><i class="bi bi-arrow-down"></i>
1.08%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm mb-0">
<div class="card-body">
<div class="float-end">
<i class="bi bi-receipt widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Current Week</h5>
<h4 class="mt-3 mb-3 fw-medium">$1,254</h4>
<p class="mb-0 text-muted">
<span class="text-danger me-2"><i class="bi bi-arrow-down"></i>
1.08%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm mb-0">
<div class="card-body">
<div class="float-end">
<i class="bi bi-receipt-cutoff widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Previous Week</h5>
<h4 class="mt-3 mb-3 fw-medium">$1,954</h4>
<p class="mb-0 text-muted">
<span class="text-danger me-2"><i class="bi bi-arrow-down"></i>
1.08%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: '# of Sales Report',
borderColor: '#727cf5',
backgroundColor: '#dcdefc',
data: [9, 7, 3, 5, 2, 3, 8, 5, 3, 5, 2, 3],
borderWidth: 0
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
layout: {
padding: 10
}
}
});
</script>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #727cf5;
--bs-primary-dark: #727cf5;
--bs-secondary: #313a46;
--bs-white: #ffffff;
--bs-primary-rgb: 114, 124, 245;
--bs-success: #0acf97;
--bs-danger: #fa5c7c;
--bs-success-rgb: 10, 207, 151;
--bs-danger-rgb: 250, 92, 124;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
background: #fafbfe;
color: var(--bs-secondary) !important;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
a:hover {
color: var(--bs-primary);
}
h4 {
color: #6c757d !important;
}
.widget-icon {
color: var(--bs-primary);
font-size: 16px;
background-color: rgba(var(--bs-primary-rgb), .10);
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
border-radius: 3px;
display: inline-block;
}
.fs-7 {
font-size: .95rem !important;
}
.fs-8 {
font-size: .90rem !important;
}
.widget-flat {
margin-bottom: 0.1rem;
}
.text-muted {
--bs-text-opacity: 1;
color: rgb(106 109 112 / 75%) !important;
}
Statistics component - 1
COPY
<section class="">
<div class="container-fluid p-0 m-0">
<div class="row g-2 justify-content-center">
<!-- Middle content start -->
<div class="col-md-10 me-auto">
<div class="h-100vn w-100 p-4">
<h1 class="fs-5">Dashboard</h1>
<div class="row">
<div class="col-md-5">
<div class="row g-3">
<div class="col-sm-6">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm">
<div class="card-body">
<div class="float-end">
<i class="bi bi-people-fill widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Customers</h5>
<h4 class="mt-3 mb-3 fw-medium">36,254</h4>
<p class="mb-0 text-muted">
<span class="text-success me-2"><i class="bi bi-arrow-up"></i>
5.27%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm">
<div class="card-body">
<div class="float-end">
<i class="bi bi-shop widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Orders</h5>
<h4 class="mt-3 mb-3 fw-medium">3,500</h4>
<p class="mb-0 text-muted">
<span class="text-danger me-2"><i class="bi bi-arrow-down"></i>
1.08%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm">
<div class="card-body">
<div class="float-end">
<i class="bi bi-currency-dollar widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Revenue</h5>
<h4 class="mt-3 mb-3 fw-medium">$6,254</h4>
<p class="mb-0 text-muted">
<span class="text-success me-2"><i class="bi bi-arrow-up"></i>
1.27%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm">
<div class="card-body">
<div class="float-end">
<i class="bi bi-activity widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Growth</h5>
<h4 class="mt-3 mb-3 fw-medium">+ 30.56%</h4>
<p class="mb-0 text-muted">
<span class="text-danger me-2"><i class="bi bi-arrow-down"></i>
1.08%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm mb-0">
<div class="card-body">
<div class="float-end">
<i class="bi bi-receipt widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Current Week</h5>
<h4 class="mt-3 mb-3 fw-medium">$1,254</h4>
<p class="mb-0 text-muted">
<span class="text-danger me-2"><i class="bi bi-arrow-down"></i>
1.08%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- Summary card start -->
<div class="card widget-flat border-0 shadow-sm mb-0">
<div class="card-body">
<div class="float-end">
<i class="bi bi-receipt-cutoff widget-icon"></i>
</div>
<h5 class="text-muted fs-8 fw-normal mt-0" title="Number of Customers">
Previous Week</h5>
<h4 class="mt-3 mb-3 fw-medium">$1,954</h4>
<p class="mb-0 text-muted">
<span class="text-danger me-2"><i class="bi bi-arrow-down"></i>
1.08%</span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<div class="bg-white p-3 shadow-sm h-100vn">
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: '# of Sales Report',
borderColor: '#727cf5',
backgroundColor: '#dcdefc',
data: [9, 7, 3, 5, 2, 3, 8, 5, 3, 5, 2, 3],
borderWidth: 0
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
layout: {
padding: 10
}
}
});
</script>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-primary: #1121ce;
--bs-primary-dark: #0716b6;
--bs-secondary: #313a46;
--bs-white: #ffffff;
--bs-primary-rgb: 114, 124, 245;
--bs-success: #0acf97;
--bs-danger: #fa5c7c;
--bs-success-rgb: 10, 207, 151;
--bs-danger-rgb: 250, 92, 124;
}
body {
font-family: 'Inter', sans-serif;
font-size: .85rem;
background: #fafbfe;
color: var(--bs-secondary) !important;
}
.bg-primary {
background-color: var(--bs-primary) !important;
}
.bg-secondary {
background-color: var(--bs-secondary) !important;
}
a {
text-decoration: none;
color: var(--bs-secondary);
}
a:hover {
color: var(--bs-primary);
}
h4 {
color: #6c757d !important;
}
.widget-icon {
color: var(--bs-primary);
font-size: 16px;
background-color: rgba(var(--bs-primary-rgb), .25);
height: 40px;
width: 40px;
text-align: center;
line-height: 40px;
border-radius: 3px;
display: inline-block;
}
.fs-7 {
font-size: .95rem !important;
}
.fs-8 {
font-size: .90rem !important;
}
.widget-flat {
margin-bottom: 0.1rem;
}
.text-muted {
--bs-text-opacity: 1;
color: rgb(106 109 112 / 75%) !important;
}
More coming soon
Regular license
- Free to use this design
- Customization by expert designer $20/hr
- For more information please get in touch with our marketing person - info@webui.io