Cards - All Examples

Discover 63 Cards examples available in Loopple

Card List Group

Card Balance

Card Image

Card Stat

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

Card Coin List

Card Stat Bg

Card Balance Empty

Card Carousel

Card Background

Card Simple

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