Framework
Theme
All
689
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
General
6
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
UI Components Library
Discover 689 components available in Loopple’s library! Create modern templates without creativity of a designer
Section Tables
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-8 drop-zone">
<div class="card draggable">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Page visits</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">See all</a>
</div>
</div>
</div>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Page name</th>
<th scope="col">Visitors</th>
<th scope="col">Unique users</th>
<th scope="col">Bounce rate</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> /argon/ </th>
<td> 4,569 </td>
<td> 340 </td>
<td>
<i class="fas fa-arrow-up text-success mr-3"></i> 46,53%
</td>
</tr>
<tr>
<th scope="row"> /argon/index.html </th>
<td> 3,985 </td>
<td> 319 </td>
<td>
<i class="fas fa-arrow-down text-warning mr-3"></i> 46,53%
</td>
</tr>
<tr>
<th scope="row"> /argon/charts.html </th>
<td> 3,513 </td>
<td> 294 </td>
<td>
<i class="fas fa-arrow-down text-warning mr-3"></i> 36,49%
</td>
</tr>
<tr>
<th scope="row"> /argon/tables.html </th>
<td> 2,050 </td>
<td> 147 </td>
<td>
<i class="fas fa-arrow-up text-success mr-3"></i> 50,87%
</td>
</tr>
<tr>
<th scope="row"> /argon/profile.html </th>
<td> 1,795 </td>
<td> 190 </td>
<td>
<i class="fas fa-arrow-down text-danger mr-3"></i> 46,53%
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xl-4 drop-zone">
<div class="card draggable">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Social traffic</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">See all</a>
</div>
</div>
</div>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Referral</th>
<th scope="col">Visitors</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> Facebook </th>
<td> 1,480 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> Facebook </th>
<td> 5,480 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">70%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> Google </th>
<td> 4,807 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">80%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> Instagram </th>
<td> 3,678 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">75%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row"> twitter </th>
<td> 2,645 </td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">30%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Typography H6
Section Projects With Bottom Title
Avatar Text
Component from
Riva Dashboard Tailwind
Builder
<div class="rounded-full relative cursor-pointer shrink-0 draggable">
<span class="relative flex items-center justify-center text-sm font-semibold bg-dark text-secondary border-2 border-white/50 w-[40px] h-[40px] rounded-full shrink-0">RT</span>
</div>Logo Area With Logos In Cards
Header With Presentation Image
Sign Up Card
Table Excel
Component from
Adminkit
Builder
<div class="card table-responsive draggable">
<div class="card-header border-bottom-0">
<h5>Table Excel</h5>
</div>
<table class="table" data-integration="excel">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>Section Profile
Component from
Soft UI Dashboard
Builder
<div class="row removable mt-4">
<div class="col-12 col-xl-4 drop-zone">
<div class="card h-100 draggable">
<div class="card-header pb-0 p-3">
<h6 class="mb-0">Platform Settings</h6>
</div>
<div class="card-body p-3">
<h6 class="text-uppercase text-body text-xs font-weight-bolder">Account</h6>
<ul class="list-group">
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault" checked="">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault">Email me when someone follows me</label>
</div>
</li>
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault1">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault1">Email me when someone answers on my post</label>
</div>
</li>
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault2" checked="">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault2">Email me when someone mentions me</label>
</div>
</li>
</ul>
<h6 class="text-uppercase text-body text-xs font-weight-bolder mt-4">Application</h6>
<ul class="list-group">
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault3">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault3">New launches and projects</label>
</div>
</li>
<li class="list-group-item border-0 px-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault4" checked="">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault4">Monthly product updates</label>
</div>
</li>
<li class="list-group-item border-0 px-0 pb-0">
<div class="form-check form-switch ps-0">
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault5">
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault5">Subscribe to newsletter</label>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone">
<div class="card h-100 draggable">
<div class="card-header pb-0 p-3">
<div class="row">
<div class="col-md-8 d-flex align-items-center">
<h6 class="mb-0">Profile Information</h6>
</div>
<div class="col-md-4 text-right">
<a href="javascript:;">
<i class="fas fa-user-edit text-secondary text-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="" aria-hidden="true" data-bs-original-title="Edit Profile" aria-label="Edit Profile"></i><span class="sr-only">Edit Profile</span>
</a>
</div>
</div>
</div>
<div class="card-body p-3">
<p class="text-sm">
Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality).
</p>
<hr class="horizontal gray-light my-4">
<ul class="list-group">
<li class="list-group-item border-0 ps-0 pt-0 text-sm"><strong class="text-dark">Full Name:</strong> Alec M. Thompson</li>
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Mobile:</strong> (44) 123 1234 123</li>
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Email:</strong> [email protected]</li>
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Location:</strong> USA</li>
<li class="list-group-item border-0 ps-0 pb-0">
<strong class="text-dark text-sm">Social:</strong>
<a class="btn btn-facebook btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
<i class="fab fa-facebook fa-lg" aria-hidden="true"></i>
</a>
<a class="btn btn-twitter btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
<i class="fab fa-twitter fa-lg" aria-hidden="true"></i>
</a>
<a class="btn btn-instagram btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
<i class="fab fa-instagram fa-lg" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone">
<div class="card h-100 draggable">
<div class="card-header pb-0 p-3">
<h6 class="mb-0">Conversations</h6>
</div>
<div class="card-body p-3">
<ul class="list-group">
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar me-3">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/kal-visuals-square.jpg" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Sophie B.</h6>
<p class="mb-0 text-xs">Hi! I need more information..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar me-3">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/marie.jpg" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Anne Marie</h6>
<p class="mb-0 text-xs">Awesome work, can you..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar me-3">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/ivana-square.jpg" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Ivanna</h6>
<p class="mb-0 text-xs">About files I can..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
<div class="avatar me-3">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Peterson</h6>
<p class="mb-0 text-xs">Have a great afternoon..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
<li class="list-group-item border-0 d-flex align-items-center px-0">
<div class="avatar me-3">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-3.jpg" alt="kal" class="border-radius-lg shadow">
</div>
<div class="d-flex align-items-start flex-column justify-content-center">
<h6 class="mb-0 text-sm">Nick Daniel</h6>
<p class="mb-0 text-xs">Hi! I need more information..</p>
</div>
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto" href="javascript:;">Reply</a>
</li>
</ul>
</div>
</div>
</div>
</div>Section Projects
Component from
Soft UI Dashboard
Builder
<div class="row removable mt-4">
<div class="col-12 drop-zone">
<div class="card mb-4">
<div class="card-header pb-0 p-3">
<h6 class="mb-1">Projects</h6>
<p class="text-sm">Architects design houses</p>
</div>
<div class="card-body p-3">
<div class="row">
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4">
<div class="card card-blog card-plain draggable">
<div class="position-relative">
<a class="d-block shadow-xl border-radius-xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/home-decor-1.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-xl">
</a>
</div>
<div class="card-body px-1 pb-0">
<p class="text-gradient text-dark mb-2 text-sm">Project #2</p>
<a href="javascript:;">
<h5>
Modern
</h5>
</a>
<p class="mb-4 text-sm">
As Uber works through a huge amount of internal management turmoil.
</p>
<div class="d-flex align-items-center justify-content-between">
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View Project</button>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Elena Morison">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-1.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Milly">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-2.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Nick Daniel">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-3.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Peterson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4 drop-zone">
<div class="card card-blog card-plain draggable">
<div class="position-relative">
<a class="d-block shadow-xl border-radius-xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/home-decor-2.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
</a>
</div>
<div class="card-body px-1 pb-0">
<p class="text-gradient text-dark mb-2 text-sm">Project #1</p>
<a href="javascript:;">
<h5>
Scandinavian
</h5>
</a>
<p class="mb-4 text-sm">
Music is something that every person has his or her own specific opinion about.
</p>
<div class="d-flex align-items-center justify-content-between">
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View Project</button>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Nick Daniel">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-3.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Peterson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Elena Morison">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-1.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Milly">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-2.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4 drop-zone">
<div class="card card-blog card-plain draggable">
<div class="position-relative">
<a class="d-block shadow-xl border-radius-xl">
<img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/home-decor-3.jpg" alt="img-blur-shadow" class="img-fluid shadow border-radius-xl">
</a>
</div>
<div class="card-body px-1 pb-0">
<p class="text-gradient text-dark mb-2 text-sm">Project #3</p>
<a href="javascript:;">
<h5>
Minimalist
</h5>
</a>
<p class="mb-4 text-sm">
Different people have different taste, and various types of music.
</p>
<div class="d-flex align-items-center justify-content-between">
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View Project</button>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Peterson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Nick Daniel">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-3.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Milly">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-2.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Elena Morison">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-1.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4 drop-zone">
<div class="card h-100 card-plain border draggable">
<div class="card-body d-flex flex-column justify-content-center text-center">
<a href="javascript:;">
<i class="fa fa-plus text-secondary mb-3" aria-hidden="true"></i>
<h5 class=" text-secondary"> New project </h5>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>