Framework
Theme
All
380
Testimonials
9
Navbars
27
Faq
1
Blogs
11
Headers
30
Contents
10
Stats
4
Authentication
7
Features
16
Cards Section
28
Teams
5
Call To Actions
9
Logo Areas
3
Contact Us
2
Pricing
4
Charts
14
Tables
24
Cards
38
Components
27
Forms
9
Sidebars
19
Charts Section
4
Tables Section
11
Projects Section
10
Teams Section
8
Typography
24
Profiles Section
8
Contacts Section
9
Bootstrap Cards Section
Discover 28 Bootstrap Cards Section available in Loopple
Section Card Stats Gradient
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-primary border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Tasks completed</h5>
<span class="h2 font-weight-bold mb-0 text-white">8/24</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-info border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Contacts</h5>
<span class="h2 font-weight-bold mb-0 text-white">123/267</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-danger border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Items sold</h5>
<span class="h2 font-weight-bold mb-0 text-white">200/300</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-default border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Notifications</h5>
<span class="h2 font-weight-bold mb-0 text-white">50/62</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
</div>Card Group
Card Account
Card Stats Connected
Card Payments
Card Testimonials
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
Card Swiper
Section Card Stats Dark
Component from
Soft UI Dashboard
Builder
<div class="row mt-4 removable">
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4 drop-zone">
<div class="card bg-gradient-dark 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-white font-weight-bold">Today's Money</p>
<h5 class="font-weight-bolder text-white mb-0">
$53,000
<span class="text-success text-sm font-weight-bolder">+55%</span>
</h5>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
<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 mb-xl-0 mb-4 drop-zone">
<div class="card bg-gradient-dark 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-white font-weight-bold">Today's Users</p>
<h5 class="font-weight-bolder text-white mb-0">
2,300
<span class="text-success text-sm font-weight-bolder">+3%</span>
</h5>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
<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 mb-xl-0 mb-4 drop-zone">
<div class="card bg-gradient-dark 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-white font-weight-bold">New Clients</p>
<h5 class="font-weight-bolder text-white mb-0">
+3,462
<span class="text-danger text-sm font-weight-bolder">-2%</span>
</h5>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
<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 bg-gradient-dark 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-white font-weight-bold">Sales</p>
<h5 class="font-weight-bolder text-white mb-0">
$103,430
<span class="text-success text-sm font-weight-bolder">+5%</span>
</h5>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
<i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>