Framework
Theme
All
683
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
Cards Section - All Examples
Discover 38 Cards Section examples available in Loopple
Stats Cards
Component from
Chakra UI Dashboard
Builder
<Grid data-type='Grid' templateColumns='repeat(4, 1fr)' gap={6} mb="6">
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel'>Visits</StatLabel>
<StatNumber data-type='StatNumber'>345,670</StatNumber>
<StatHelpText data-type='StatHelpText'>
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
23.36%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel'>Users</StatLabel>
<StatNumber data-type='StatNumber'>16,890</StatNumber>
<StatHelpText data-type='StatHelpText'>
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
14.85%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel'>Revenue</StatLabel>
<StatNumber data-type='StatNumber'>$1,230,670</StatNumber>
<StatHelpText data-type='StatHelpText'>
<StatArrow data-type='StatArrow' type='decrease'></StatArrow>
1.12%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel'>Expenses</StatLabel>
<StatNumber data-type='StatNumber'>$480,783</StatNumber>
<StatHelpText data-type='StatHelpText'>
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
5.12%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
</Grid>Stats Card Dark
Component from
Chakra UI Dashboard
Builder
<Grid data-type='Grid' templateColumns='repeat(4, 1fr)' gap={6} mb="6">
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
bg="blackAlpha.900"
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel' color="white">Visits</StatLabel>
<StatNumber data-type='StatNumber' color="white">345,670</StatNumber>
<StatHelpText data-type='StatHelpText' color="white">
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
23.36%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
bg="blackAlpha.900"
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel' color="white">Users</StatLabel>
<StatNumber data-type='StatNumber' color="white">16,890</StatNumber>
<StatHelpText data-type='StatHelpText' color="white">
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
14.85%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
bg="blackAlpha.900"
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel' color="white">Revenue</StatLabel>
<StatNumber data-type='StatNumber' color="white">$1,230,670</StatNumber>
<StatHelpText data-type='StatHelpText' color="white">
<StatArrow data-type='StatArrow' type='decrease'></StatArrow>
1.12%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
<GridItem data-type='GridItem'>
<Card data-type='Card'
overflow='hidden'
variant='outline'
bg="blackAlpha.900"
>
<CardBody data-type='CardBody'>
<Stat data-type='Stat'>
<StatLabel data-type='StatLabel' color="white">Expenses</StatLabel>
<StatNumber data-type='StatNumber' color="white">$480,783</StatNumber>
<StatHelpText data-type='StatHelpText' color="white">
<StatArrow data-type='StatArrow' type='increase'></StatArrow>
5.12%
</StatHelpText>
</Stat>
</CardBody>
</Card>
</GridItem>
</Grid>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>Cards Socials
Component from
Riva Dashboard Tailwind
Builder
<div class="flex flex-wrap -mx-3 mb-5 removable">
<div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
<div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
<!-- card body -->
<div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
<div class="m-0">
<img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/instagram.svg" alt="youtube">
</div>
<div class="flex flex-col my-7">
<h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">590k</h3>
<div class="m-0">
<span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
</div>
</div>
<span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-success bg-success-light border border-success">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
</svg>
2.86%
</span>
</div>
<!-- end card body -->
</div>
</div>
<div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
<div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
<!-- card body -->
<div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
<div class="m-0">
<img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/youtube.svg" alt="youtube">
</div>
<div class="flex flex-col my-7">
<h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">58k</h3>
<div class="m-0">
<span class="font-medium text-secondary-dark text-lg/normal">Subscribers</span>
</div>
</div>
<span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-success bg-success-light border border-success">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
</svg>
7%
</span>
</div>
<!-- end card body -->
</div>
</div>
<div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
<div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
<!-- card body -->
<div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
<div class="m-0">
<img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/facebook.svg" alt="youtube">
</div>
<div class="flex flex-col my-7">
<h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">896k</h3>
<div class="m-0">
<span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
</div>
</div>
<span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-danger bg-danger-light border border-danger">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6L9 12.75l4.286-4.286a11.948 11.948 0 014.306 6.43l.776 2.898m0 0l3.182-5.511m-3.182 5.51l-5.511-3.181"></path>
</svg>
1.12%
</span>
</div>
<!-- end card body -->
</div>
</div>
<div class="w-full max-w-full px-3 mb-6 sm:w-1/4 sm:flex-none xl:mb-0 xl:w-1/4 drop-zone">
<div class="relative flex flex-col min-w-0 break-words border border-dashed bg-clip-border rounded-2xl border-stone-200 bg-light/30 draggable" draggable="true">
<!-- card body -->
<div class="flex flex-col items-start justify-between flex-auto py-8 px-9">
<div class="m-0">
<img class="w-[35px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/logos/twitter.svg" alt="youtube">
</div>
<div class="flex flex-col my-7">
<h3 class="text-secondary-inverse text-4xl tracking-[-0.115rem] font-bold font-display">77k</h3>
<div class="m-0">
<span class="font-medium text-secondary-dark text-lg/normal">Followers</span>
</div>
</div>
<span class="inline-flex items-center px-2 py-1 mr-auto font-semibold text-center align-baseline rounded-lg text-base/none text-success bg-success-light border border-success">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"></path>
</svg>
9.4%
</span>
</div>
<!-- end card body -->
</div>
</div>
</div>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>Section Card Stats
Component from
Adminkit
Builder
<div class="row removable">
<div class="col-sm-3 drop-zone">
<div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">Sales</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<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-truck align-middle">
<rect x="1" y="3" width="15" height="13"></rect>
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
<circle cx="5.5" cy="18.5" r="2.5"></circle>
<circle cx="18.5" cy="18.5" r="2.5"></circle>
</svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3">2.382</h1>
<div class="mb-0">
<span class="text-danger">
<i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3 drop-zone">
<div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">Visitors</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<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-users align-middle">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3">14.212</h1>
<div class="mb-0">
<span class="text-success">
<i class="mdi mdi-arrow-bottom-right"></i> 5.25% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3 drop-zone">
<div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">Earnings</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<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-dollar-sign align-middle">
<line x1="12" y1="1" x2="12" y2="23"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3">$21.300</h1>
<div class="mb-0">
<span class="text-success">
<i class="mdi mdi-arrow-bottom-right"></i> 6.65% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3 drop-zone">
<div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">Orders</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<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-shopping-cart align-middle">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3">64</h1>
<div class="mb-0">
<span class="text-danger">
<i class="mdi mdi-arrow-bottom-right"></i> -2.25% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
</div>
</div>
</div>Section Card Stats Dark
Component from
Adminkit
Builder
<div class="row removable">
<div class="col-sm-3 drop-zone">
<div class="card bg-dark text-white draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title text-white opacity-9">Sales</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<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-truck align-middle">
<rect x="1" y="3" width="15" height="13"></rect>
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
<circle cx="5.5" cy="18.5" r="2.5"></circle>
<circle cx="18.5" cy="18.5" r="2.5"></circle>
</svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3 text-white">2.382</h1>
<div class="mb-0">
<span class="text-danger">
<i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>
<span class="text-white opacity-8">Since last week</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3 drop-zone">
<div class="card bg-dark text-white draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title text-white opacity-9">Visitors</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<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-users align-middle">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3 text-white">14.212</h1>
<div class="mb-0">
<span class="text-success">
<i class="mdi mdi-arrow-bottom-right"></i> 5.25% </span>
<span class="text-white opacity-8">Since last week</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3 drop-zone">
<div class="card bg-dark text-white draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title text-white opacity-9">Earnings</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<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-dollar-sign align-middle">
<line x1="12" y1="1" x2="12" y2="23"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3 text-white">$21.300</h1>
<div class="mb-0">
<span class="text-success">
<i class="mdi mdi-arrow-bottom-right"></i> 6.65% </span>
<span class="text-white opacity-8">Since last week</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3 drop-zone">
<div class="card bg-dark text-white draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title text-white opacity-9">Orders</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<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-shopping-cart align-middle">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3 text-white">64</h1>
<div class="mb-0">
<span class="text-danger">
<i class="mdi mdi-arrow-bottom-right"></i> -2.25% </span>
<span class="text-white opacity-8">Since last week</span>
</div>
</div>
</div>
</div>
</div>Section Card Stats
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Total traffic</h5>
<span class="h2 font-weight-bold mb-0">350,897</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
<i class="fa fa-user"></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>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<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-gradient-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>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Sales</h5>
<span class="h2 font-weight-bold mb-0">924</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
<i class="fa fa-coins"></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>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
<span class="h2 font-weight-bold mb-0">49,65%</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
<i class="fa fa-chart-bar"></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>
</div>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>Section Card Stats
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 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 font-weight-bold">Today's Money</p>
<h5 class="font-weight-bolder 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 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 font-weight-bold">Today's Users</p>
<h5 class="font-weight-bolder 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 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 font-weight-bold">New Clients</p>
<h5 class="font-weight-bolder 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 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 font-weight-bold">Sales</p>
<h5 class="font-weight-bolder 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>