Cards Section - All Examples

Discover 37 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&#39;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&#39;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&#39;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&#39;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>