Home

Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard Soft UI Dashboard AdminKit Soft UI Design System Soft UI Dashboard Tailwind Asteria Dashboard Chakra UI Dashboard Motion Landing Library React Motion Landing Library Argon Dashboard Riva Dashboard Tailwind
All 380
Components 32
Sidebars 19
Tables 24
Cards Section 28
Profiles Section 8
Projects Section 10
Navbars 27
Typography 24
Tables Section 11
Teams Section 8
Cards 38
Contacts Section 9
Charts Section 4
Forms 5
Charts 14
Testimonials 9
Faq 1
Blogs 11
Headers 29
Contents 10
Stats 4
Authentication 7
Features 16
Teams 5
Call To Actions 9
Logo Areas 3
Contact Us 2
Pricing 4

Bootstrap Cards

Discover 38 Bootstrap Cards available in Loopple

Card Profile

Soft UI Dashboard View Theme

Card Project User

Soft UI Dashboard View Theme

Card Song

Soft UI Dashboard View Theme

Card Illustration

Soft UI Dashboard View Theme 
<div class="card draggable">
  <div class="card-body p-3">
    <div class="row">
      <div class="col-lg-6">
        <div class="d-flex flex-column h-100">
          <p class="mb-1 pt-2 text-bold">Built by developers</p>
          <h5 class="font-weight-bolder">Soft UI Dashboard</h5>
          <p class="mb-5">From colors, cards, typography to complex elements, you will find the full documentation.</p>
          <a class="text-body text-sm font-weight-bold mb-0 icon-move-right mt-auto" href="javascript:;">
            Read More
            <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
          </a>
        </div>
      </div>
      <div class="col-lg-5 ms-auto text-center mt-5 mt-lg-0">
        <div class="bg-gradient-primary border-radius-lg h-100">
          <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/shapes/waves-white.svg" class="position-absolute h-100 w-50 top-0 d-lg-block d-none" alt="waves">
          <div class="position-relative d-flex align-items-center justify-content-center h-100">
            <img class="w-100 position-relative z-index-2 pt-4" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/illustrations/rocket-white.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Card Image

Soft UI Dashboard View Theme 
<div class="card h-100 p-3 draggable">
    <div class="overflow-hidden position-relative border-radius-lg bg-cover h-100" style="background-image: url(https://demos.creative-tim.com/soft-ui-dashboard/assets/img/ivancik.jpg);">
        <span class="mask bg-gradient-dark"></span>
        <div class="card-body position-relative z-index-1 d-flex flex-column h-100 p-3">
        <h5 class="text-white font-weight-bolder mb-4 pt-2">Work with the rockets</h5>
        <p class="text-white">Wealth creation is an evolutionarily recent positive-sum game. It is all about who take the opportunity first.</p>
        <a class="text-white text-sm font-weight-bold mb-0 icon-move-right mt-auto" href="javascript:;">
            Read More
            <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
        </a>
        </div>
    </div>
</div>

Card Payment

Soft UI Dashboard View Theme

Card Profile

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

Adminkit View Theme

Card Image

Adminkit View Theme 
<div class="card draggable" style="width: 18rem;">
  <img src="https://demo-basic.adminkit.io/img/photos/unsplash-1.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card#&39;s content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card Stats

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