Cards - All Examples

Discover 70 Cards examples available in Loopple

Card Stats

<div class="card card-stats draggable">
  <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-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>

Card Nft

Card Map

Card Profile

<div class="card draggable mb-3">
  <div class="card-header">
    <h5 class="card-title mb-0">Profile Details</h5>
  </div>
  <div class="card-body text-center">
    <img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" alt="Christina Mason" class="img-fluid rounded-circle mb-2" width="128" height="128">
    <h5 class="card-title mb-0">Christina Mason</h5>
    <div class="text-muted mb-2">Lead Developer</div>
    <div>
      <a class="btn btn-primary btn-sm" href="#">Follow</a>
      <a class="btn btn-primary btn-sm" href="#">
        <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-message-square">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg> Message </a>
    </div>
  </div>
  <hr class="my-0">
  <div class="card-body">
    <h5 class="h6 card-title">Skills</h5>
    <a href="#" class="badge bg-primary me-1 my-1">HTML</a>
    <a href="#" class="badge bg-primary me-1 my-1">JavaScript</a>
    <a href="#" class="badge bg-primary me-1 my-1">Sass</a>
    <a href="#" class="badge bg-primary me-1 my-1">Angular</a>
    <a href="#" class="badge bg-primary me-1 my-1">Vue</a>
    <a href="#" class="badge bg-primary me-1 my-1">React</a>
    <a href="#" class="badge bg-primary me-1 my-1">Redux</a>
    <a href="#" class="badge bg-primary me-1 my-1">UI</a>
    <a href="#" class="badge bg-primary me-1 my-1">UX</a>
  </div>
  <hr class="my-0">
  <div class="card-body">
    <h5 class="h6 card-title">About</h5>
    <ul class="list-unstyled mb-0">
      <li class="mb-1">
        <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-home feather-sm me-1">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
          <polyline points="9 22 9 12 15 12 15 22"></polyline>
        </svg> Lives in <a href="#">San Francisco, SA</a>
      </li>
      <li class="mb-1">
        <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-briefcase feather-sm me-1">
          <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
          <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
        </svg> Works at <a href="#">GitHub</a>
      </li>
      <li class="mb-1">
        <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-map-pin feather-sm me-1">
          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
          <circle cx="12" cy="10" r="3"></circle>
        </svg> From <a href="#">Boston</a>
      </li>
    </ul>
  </div>
</div>

Card Testimonial

Card Storage

<div data-type='div' className="!z-5 relative flex flex-col rounded-[20px] bg-white bg-clip-border shadow-3xl shadow-shadow-500 dark:!bg-navy-800 dark:text-white dark:shadow-none w-full h-full p-4 draggable">
     <div data-type='div' className="mb-auto flex flex-col items-center justify-center">
       <div data-type='div' className="mt-2 flex items-center justify-center rounded-full bg-lightPrimary p-[26px] text-5xl font-bold text-brand-500 dark:!bg-navy-700 dark:text-white">
         <BsCloudCheck data-type='BsCloudCheck' />
        </div>
       <h4 data-type='h4' className="mb-px mt-3 text-2xl font-bold text-navy-700 dark:text-white">
          Your storage
        </h4>
        <p data-type='p' className="px-5 text-center text-base font-normal text-gray-600 md:!px-0 xl:!px-8">
          Supervise your drive space in the easiest way
        </p>
      </div>

     <div data-type='div' className="flex flex-col">
       <div data-type='div' className="flex justify-between">
          <p data-type='p' className="text-sm font-medium text-gray-600">25.6 GB</p>
          <p data-type='p' className="text-sm font-medium text-gray-600">50 GB</p>
        </div>
       <div data-type='div' className="mt-2 flex h-3 w-full items-center rounded-full bg-lightPrimary dark:!bg-navy-700">
         <span data-type='span' className="h-full w-1/2 rounded-full bg-brand-500 dark:!bg-white" />
        </div>
      </div>
    </div>

Card Project

<div class="relative flex flex-col min-w-0 break-words bg-green-500 border-0 bg-clip-border rounded-2xl mb-5 draggable">
    <!-- card header -->
    <div class="px-9 pt-5 flex justify-between items-stretch flex-wrap min-h-[70px] pb-0 bg-transparent">
        <div class="flex flex-col items-start justify-center m-2 ml-0 font-medium text-xl/normal text-dark">
        <!--begin::Amount-->
        <span class="text-white text-5xl/none font-semibold mr-2 tracking-[-0.115rem]">92</span>
        <!--end::Amount-->

        <!--begin::Subtitle-->
        <span class="pt-1 font-medium text-white/80 text-lg/normal">Completed Tasks</span>
        <!--end::Subtitle-->
        </div>
    </div>
    <!-- card body  -->
    <div class="flex items-end flex-auto py-8 pt-0 px-9 ">
        <!--begin::Progress-->
        <div class="flex flex-col items-center w-full mt-3">
        <div class="flex justify-between w-full mt-auto mb-2 font-semibold text-white/80 text-lg/normal">
            <span class="mr-4">12 Pending</span>
            <span>85%</span>
        </div>

        <div class="mx-3 rounded-2xl h-[8px] w-full bg-white/20">
            <div class="rounded-2xl bg-white w-[85%] h-[8px]"></div>
        </div>
        </div>
        <!--end::Progress-->
    </div>
    <!-- end card body  -->
</div>

Card Profile

Card Project User

Card Activities