Home
Framework
Theme
All
663
Forms
12
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
51
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Cards Section
37
Features
25
Teams Section
11
Faq
9
Headers
45
Blogs
13
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Http Codes
6
Authentication
15
Call To Actions
21
Teams
16
Pricing
13


Cards - All Examples
Discover 70 Cards examples available in Loopple
Card Stats

<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>
<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 Nft
Card Map
Card Profile

<div class="card draggable mb-3">
<div class="card-header">
<h5 class="card-title mb-0">Profile Details</h5>
</div>
<div class="card-body text-center">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128" height="128">
<h5 class="card-title mb-0">Christina Mason</h5>
<div class="text-muted mb-2">Lead Developer</div>
<div>
<a class="btn btn-primary btn-sm" href="#">Follow</a>
<a class="btn btn-primary btn-sm" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg> Message </a>
</div>
</div>
<hr class="my-0">
<div class="card-body">
<h5 class="h6 card-title">Skills</h5>
<a href="#" class="badge bg-primary me-1 my-1">HTML</a>
<a href="#" class="badge bg-primary me-1 my-1">JavaScript</a>
<a href="#" class="badge bg-primary me-1 my-1">Sass</a>
<a href="#" class="badge bg-primary me-1 my-1">Angular</a>
<a href="#" class="badge bg-primary me-1 my-1">Vue</a>
<a href="#" class="badge bg-primary me-1 my-1">React</a>
<a href="#" class="badge bg-primary me-1 my-1">Redux</a>
<a href="#" class="badge bg-primary me-1 my-1">UI</a>
<a href="#" class="badge bg-primary me-1 my-1">UX</a>
</div>
<hr class="my-0">
<div class="card-body">
<h5 class="h6 card-title">About</h5>
<ul class="list-unstyled mb-0">
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home feather-sm me-1">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg> Lives in <a href="#">San Francisco, SA</a>
</li>
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-briefcase feather-sm me-1">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
</svg> Works at <a href="#">GitHub</a>
</li>
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin feather-sm me-1">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg> From <a href="#">Boston</a>
</li>
</ul>
</div>
</div>
<div class="card draggable mb-3">
<div class="card-header">
<h5 class="card-title mb-0">Profile Details</h5>
</div>
<div class="card-body text-center">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128" height="128">
<h5 class="card-title mb-0">Christina Mason</h5>
<div class="text-muted mb-2">Lead Developer</div>
<div>
<a class="btn btn-primary btn-sm" href="#">Follow</a>
<a class="btn btn-primary btn-sm" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg> Message </a>
</div>
</div>
<hr class="my-0">
<div class="card-body">
<h5 class="h6 card-title">Skills</h5>
<a href="#" class="badge bg-primary me-1 my-1">HTML</a>
<a href="#" class="badge bg-primary me-1 my-1">JavaScript</a>
<a href="#" class="badge bg-primary me-1 my-1">Sass</a>
<a href="#" class="badge bg-primary me-1 my-1">Angular</a>
<a href="#" class="badge bg-primary me-1 my-1">Vue</a>
<a href="#" class="badge bg-primary me-1 my-1">React</a>
<a href="#" class="badge bg-primary me-1 my-1">Redux</a>
<a href="#" class="badge bg-primary me-1 my-1">UI</a>
<a href="#" class="badge bg-primary me-1 my-1">UX</a>
</div>
<hr class="my-0">
<div class="card-body">
<h5 class="h6 card-title">About</h5>
<ul class="list-unstyled mb-0">
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home feather-sm me-1">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg> Lives in <a href="#">San Francisco, SA</a>
</li>
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-briefcase feather-sm me-1">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
</svg> Works at <a href="#">GitHub</a>
</li>
<li class="mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin feather-sm me-1">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg> From <a href="#">Boston</a>
</li>
</ul>
</div>
</div>
Card Testimonial
Card Storage

<div data-type='div' className="!z-5 relative flex flex-col rounded-[20px] bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:shadow-none w-full h-full p-4 draggable">
<div data-type='div' className="mb-auto flex flex-col items-center justify-center">
<div data-type='div' className="mt-2 flex items-center justify-center rounded-full bg-lightPrimary p-[26px] text-5xl font-bold text-brand-500 dark:!bg-navy-700 dark:text-white">
<BsCloudCheck data-type='BsCloudCheck' />
</div>
<h4 data-type='h4' className="mb-px mt-3 text-2xl font-bold text-navy-700 dark:text-white">
Your storage
</h4>
<p data-type='p' className="px-5 text-center text-base font-normal text-gray-600 md:!px-0 xl:!px-8">
Supervise your drive space in the easiest way
</p>
</div>
<div data-type='div' className="flex flex-col">
<div data-type='div' className="flex justify-between">
<p data-type='p' className="text-sm font-medium text-gray-600">25.6 GB</p>
<p data-type='p' className="text-sm font-medium text-gray-600">50 GB</p>
</div>
<div data-type='div' className="mt-2 flex h-3 w-full items-center rounded-full bg-lightPrimary dark:!bg-navy-700">
<span data-type='span' className="h-full w-1/2 rounded-full bg-brand-500 dark:!bg-white" />
</div>
</div>
</div>
<div data-type='div' className="!z-5 relative flex flex-col rounded-[20px] bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:shadow-none w-full h-full p-4 draggable">
<div data-type='div' className="mb-auto flex flex-col items-center justify-center">
<div data-type='div' className="mt-2 flex items-center justify-center rounded-full bg-lightPrimary p-[26px] text-5xl font-bold text-brand-500 dark:!bg-navy-700 dark:text-white">
<BsCloudCheck data-type='BsCloudCheck' />
</div>
<h4 data-type='h4' className="mb-px mt-3 text-2xl font-bold text-navy-700 dark:text-white">
Your storage
</h4>
<p data-type='p' className="px-5 text-center text-base font-normal text-gray-600 md:!px-0 xl:!px-8">
Supervise your drive space in the easiest way
</p>
</div>
<div data-type='div' className="flex flex-col">
<div data-type='div' className="flex justify-between">
<p data-type='p' className="text-sm font-medium text-gray-600">25.6 GB</p>
<p data-type='p' className="text-sm font-medium text-gray-600">50 GB</p>
</div>
<div data-type='div' className="mt-2 flex h-3 w-full items-center rounded-full bg-lightPrimary dark:!bg-navy-700">
<span data-type='span' className="h-full w-1/2 rounded-full bg-brand-500 dark:!bg-white" />
</div>
</div>
</div>
Card Project

<div class="relative flex flex-col min-w-0 break-words bg-green-500 border-0 bg-clip-border rounded-2xl mb-5 draggable">
<!-- card header -->
<div class="px-9 pt-5 flex justify-between items-stretch flex-wrap min-h-[70px] pb-0 bg-transparent">
<div class="flex flex-col items-start justify-center m-2 ml-0 font-medium text-xl/normal text-dark">
<!--begin::Amount-->
<span class="text-white text-5xl/none font-semibold mr-2 tracking-[-0.115rem]">92</span>
<!--end::Amount-->
<!--begin::Subtitle-->
<span class="pt-1 font-medium text-white/80 text-lg/normal">Completed Tasks</span>
<!--end::Subtitle-->
</div>
</div>
<!-- card body -->
<div class="flex items-end flex-auto py-8 pt-0 px-9 ">
<!--begin::Progress-->
<div class="flex flex-col items-center w-full mt-3">
<div class="flex justify-between w-full mt-auto mb-2 font-semibold text-white/80 text-lg/normal">
<span class="mr-4">12 Pending</span>
<span>85%</span>
</div>
<div class="mx-3 rounded-2xl h-[8px] w-full bg-white/20">
<div class="rounded-2xl bg-white w-[85%] h-[8px]"></div>
</div>
</div>
<!--end::Progress-->
</div>
<!-- end card body -->
</div>
<div class="relative flex flex-col min-w-0 break-words bg-green-500 border-0 bg-clip-border rounded-2xl mb-5 draggable">
<!-- card header -->
<div class="px-9 pt-5 flex justify-between items-stretch flex-wrap min-h-[70px] pb-0 bg-transparent">
<div class="flex flex-col items-start justify-center m-2 ml-0 font-medium text-xl/normal text-dark">
<!--begin::Amount-->
<span class="text-white text-5xl/none font-semibold mr-2 tracking-[-0.115rem]">92</span>
<!--end::Amount-->
<!--begin::Subtitle-->
<span class="pt-1 font-medium text-white/80 text-lg/normal">Completed Tasks</span>
<!--end::Subtitle-->
</div>
</div>
<!-- card body -->
<div class="flex items-end flex-auto py-8 pt-0 px-9 ">
<!--begin::Progress-->
<div class="flex flex-col items-center w-full mt-3">
<div class="flex justify-between w-full mt-auto mb-2 font-semibold text-white/80 text-lg/normal">
<span class="mr-4">12 Pending</span>
<span>85%</span>
</div>
<div class="mx-3 rounded-2xl h-[8px] w-full bg-white/20">
<div class="rounded-2xl bg-white w-[85%] h-[8px]"></div>
</div>
</div>
<!--end::Progress-->
</div>
<!-- end card body -->
</div>