UI Components Library

Discover 689 components available in Loopple’s library! Create modern templates without creativity of a designer

Card Carousel

Component from Argon Dashboard Builder

Blog Digital Agency Landing 2

Header Digital Agency

Blog Digital Agency Landing

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>
Requires JavaScript

Section Charts

Component from Asteria Dashboard Builder

Cards Section Ecommerce With 3 Categories

Card Currencies List

Component from Argon Dashboard Builder

Section Contact Simple

Component from Soft UI Dashboard Builder

Contents Digital Agency Landing