Home
Framework
Theme
All
561
Forms
12
Charts
21
Navbars
38
Sidebars
26
Typography
41
Components
51
Tables
34
Cards
63
Cards Section
37
Testimonials
13
Teams Section
11
Faq
4
Headers
36
Blogs
11
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
13
Projects Section
14
Stats
7
Logo Areas
6
Authentication
10
Contact Us
5
Features
19
Pricing
7
Teams
9
Call To Actions
13
Http Codes
2
Cards - All Examples
Discover 63 Cards examples available in Loopple
Card List Group
Card Balance
Card Image
Card Stat
<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 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>Card Coin List
Card Stat Bg
Card Balance Empty
Card Carousel
<div class="card min-height-300 h-100 draggable">
<div class="overflow-hidden position-relative border-radius-lg min-height-300 h-100">
<div class="card-body position-relative z-index-1 d-flex flex-column min-height-300 h-100 p-0">
<div id="carouselImageSlide" class="carousel slide min-height-300 h-100" data-bs-ride="carousel">
<div class="carousel-inner min-height-300 h-100">
<div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1514894780887-121968d00567?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1746&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Go slow until you win</h5>
<p class="text-white text-sm mb-0">Remote work starts with eliminating commutes and cubicles.</p>
</div>
</div>
<div class="carousel-item min-height-300 h-100 bg-cover active" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1489710437720-ebb67ec84dd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Work with the rockets</h5>
<p class="text-white text-sm mb-0">Wealth creation is an evolutionarily recent positive-sum game.</p>
</div>
</div>
<div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1511497584788-876760111969?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2064&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Books don’t need an audience.</h5>
<p class="text-white text-sm mb-0">Set and enforce an aspirational hourly rate.</p>
</div>
</div>
</div>
<button class="carousel-control-prev ms-auto end-8 w-5" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="prev">
<span class="carousel-control-prev-icon position-absolute top-4 right-10" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next w-5 end-3" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="next">
<span class="carousel-control-next-icon position-absolute top-4 right-10 text-sm" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div><div class="card min-height-300 h-100 draggable">
<div class="overflow-hidden position-relative border-radius-lg min-height-300 h-100">
<div class="card-body position-relative z-index-1 d-flex flex-column min-height-300 h-100 p-0">
<div id="carouselImageSlide" class="carousel slide min-height-300 h-100" data-bs-ride="carousel">
<div class="carousel-inner min-height-300 h-100">
<div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1514894780887-121968d00567?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1746&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Go slow until you win</h5>
<p class="text-white text-sm mb-0">Remote work starts with eliminating commutes and cubicles.</p>
</div>
</div>
<div class="carousel-item min-height-300 h-100 bg-cover active" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1489710437720-ebb67ec84dd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Work with the rockets</h5>
<p class="text-white text-sm mb-0">Wealth creation is an evolutionarily recent positive-sum game.</p>
</div>
</div>
<div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1511497584788-876760111969?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2064&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Books don’t need an audience.</h5>
<p class="text-white text-sm mb-0">Set and enforce an aspirational hourly rate.</p>
</div>
</div>
</div>
<button class="carousel-control-prev ms-auto end-8 w-5" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="prev">
<span class="carousel-control-prev-icon position-absolute top-4 right-10" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next w-5 end-3" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="next">
<span class="carousel-control-next-icon position-absolute top-4 right-10 text-sm" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>Card Background
Card Simple
<div class="card draggable">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div><div class="card draggable">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>