Framework
Theme
All
380
Charts
14
Charts Section
4
Cards
38
Sidebars
19
Navbars
27
Cards Section
28
Components
27
Profiles Section
8
Projects Section
10
Forms
9
Tables
24
Tables Section
11
Teams Section
8
Typography
24
Headers
30
Contacts Section
9
Testimonials
9
Faq
1
Blogs
11
Contents
10
Stats
4
Authentication
7
Features
16
Teams
5
Call To Actions
9
Logo Areas
3
Contact Us
2
Pricing
4
Bootstrap Cards
Discover 38 Bootstrap Cards available in Loopple
Card Blog Background Image
Credit Card
Card Coin Value
Card Coin List
Card Stats
Component from
Argon Dashboard
Builder
<div class="card card-stats draggable">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
<span class="h2 font-weight-bold mb-0">2,356</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-orange text-white rounded-circle shadow">
<i class="fa fa-chart-pie"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<span class="text-success mr-2">
<i class="fa fa-arrow-up"></i> 3.48% </span>
<span class="text-nowrap">Since last month</span>
</p>
</div>
</div>Card Profile
Component from
Argon Dashboard
Builder
<div class="card card-profile draggable">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/img-1-1000x600.jpg" alt="Image placeholder" class="card-img-top">
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-2">
<div class="card-profile-image">
<a href="#">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg" class="rounded-circle">
</a>
</div>
</div>
</div>
<div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
<div class="d-flex justify-content-between">
<a href="#" class="btn btn-sm btn-info mr-4 ">Connect</a>
<a href="#" class="btn btn-sm btn-default float-right">Message</a>
</div>
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col">
<div class="card-profile-stats d-flex justify-content-center">
<div>
<span class="heading">22</span>
<span class="description">Friends</span>
</div>
<div>
<span class="heading">10</span>
<span class="description">Photos</span>
</div>
<div>
<span class="heading">89</span>
<span class="description">Comments</span>
</div>
</div>
</div>
</div>
<div class="text-center">
<h5 class="h3"> Jessica Jones <span class="font-weight-light">, 27</span>
</h5>
<h5 class="font-weight-300"> Bucharest, Romania </h5>
<h5 class="h5 mt-4"> Solution Manager - Creative Tim Officer </h5>
<h5> University of Computer Science </h5>
</div>
</div>
</div>Card Simple
Component from
Argon Dashboard
Builder
<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>
