Home

Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Soft UI Dashboard Asteria Dashboard Soft UI Design System Riva Dashboard Tailwind Chakra UI Dashboard Motion Landing Library Argon Dashboard AdminKit Soft UI Dashboard Tailwind
All 561
Forms 12
Charts 21
Navbars 38
Sidebars 26
Typography 41
Components 51
Tables 34
Cards 63
Cards Section 37
Testimonials 13
Teams Section 11
Faq 4
Headers 36
Blogs 11
Contacts Section 9
Profiles Section 13
Charts Section 7
Tables Section 15
Contents 13
Projects Section 14
Stats 7
Logo Areas 6
Authentication 10
Contact Us 5
Features 19
Pricing 7
Teams 9
Call To Actions 13
Http Codes 2

Cards Section - All Examples

Discover 37 Cards Section examples available in Loopple

Card Sections Activities

Riva Dashboard Tailwind View Theme

Cards Projects

Riva Dashboard Tailwind View Theme

Card Stats Bg

Asteria Dashboard View Theme

Section Card Stats

Argon Dashboard View Theme 
<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

Argon Dashboard View Theme 
<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 Dark

Soft UI Dashboard View Theme 
<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

Adminkit View Theme 
<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

Adminkit View Theme 
<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>

Card Group

Argon Dashboard View Theme

Section Card Group

Soft UI Dashboard View Theme