Bootstrap Cards Section - Asteria Dashboard
Discover 3 Bootstrap Cards Section available in Asteria Dashboard
Card Stats
Component from
Asteria Dashboard
Builder
<div class="row removable">
<div class="col-xl-3 col-sm-6 drop-zone">
<div class="card mb-4 draggable">
<div class="card-body p-3">
<div class="row">
<div class="col-8">
<div class="numbers">
<p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Today's Money</p>
<div class="d-flex align-items-center my-2">
<span class="badge bg-success-soft text-xxs">
<i class="fas fa-angle-up text-success" aria-hidden="true"></i>
</span>
<span class="text-xs font-weight-bolder ms-1">+55%</span>
</div>
<h4 class="font-weight-bolder mb-0">
$53,000
</h4>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
<i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 drop-zone">
<div class="card mb-4 draggable">
<div class="card-body p-3">
<div class="row">
<div class="col-8">
<div class="numbers">
<p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Today's Users</p>
<div class="d-flex align-items-center my-2">
<span class="badge bg-success-soft text-xxs">
<i class="fas fa-angle-up text-success" aria-hidden="true"></i>
</span>
<span class="text-xs font-weight-bolder ms-1">+3%</span>
</div>
<h4 class="font-weight-bolder mb-0">
2,300
</h4>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
<i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 drop-zone">
<div class="card mb-4 draggable">
<div class="card-body p-3">
<div class="row">
<div class="col-8">
<div class="numbers">
<p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">New Clients</p>
<div class="d-flex align-items-center my-2">
<span class="badge bg-danger-soft text-xxs">
<i class="fas fa-angle-down text-danger" aria-hidden="true"></i>
</span>
<span class="text-xs font-weight-bolder ms-1">-2.06%</span>
</div>
<h4 class="font-weight-bolder mb-0">
3,462
</h4>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
<i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 drop-zone">
<div class="card mb-4 draggable">
<div class="card-body p-3">
<div class="row">
<div class="col-8">
<div class="numbers">
<p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Sales</p>
<div class="d-flex align-items-center my-2">
<span class="badge bg-success-soft text-xxs">
<i class="fas fa-angle-up text-success" aria-hidden="true"></i>
</span>
<span class="text-xs font-weight-bolder ms-1">+5,42%</span>
</div>
<h4 class="font-weight-bolder mb-0">
$103,430
</h4>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
<i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Card Stats Bg
Requires JavaScript
