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
Header 16
Header 18
Section Card Stats Dark
Card Payments
Table Countries
Table Projects
Card Image
Component from
Adminkit
Builder
<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>
Requires JavaScript
Section Tables
Component from
Adminkit
Builder
<div class="row removable"> <div class="col-12 col-lg-8 col-xxl-9 d-flex drop-zone"> <div class="card flex-fill draggable"> <div class="card-header"> <h5 class="card-title mb-0">Latest Projects</h5> </div> <table class="table table-hover my-0"> <thead> <tr> <th>Name</th> <th class="d-none d-xl-table-cell">Start Date</th> <th class="d-none d-xl-table-cell">End Date</th> <th>Status</th> <th class="d-none d-md-table-cell">Assignee</th> </tr> </thead> <tbody> <tr> <td>Project Apollo</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Vanessa Tucker</td> </tr> <tr> <td>Project Fireball</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-danger">Cancelled</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> <tr> <td>Project Hades</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Sharon Lessman</td> </tr> <tr> <td>Project Nitro</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-warning">In progress</span> </td> <td class="d-none d-md-table-cell">Vanessa Tucker</td> </tr> <tr> <td>Project Phoenix</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> <tr> <td>Project X</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Sharon Lessman</td> </tr> <tr> <td>Project Romeo</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Christina Mason</td> </tr> <tr> <td>Project Wombat</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-warning">In progress</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> </tbody> </table> </div> </div> <div class="col-12 col-lg-4 col-xxl-3 d-flex drop-zone"> <div class="card flex-fill w-100 draggable"> <div class="card-header"> <h5 class="card-title mb-0">Monthly Sales</h5> </div> <div class="card-body d-flex w-100"> <div class="align-self-center chart chart-lg"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chartjs-dashboard-bar" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas> </div> </div> </div> </div> </div>
<script>
// Bar chart new Chart(document.getElementById("chartjs-dashboard-bar"), { type: "bar", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "This year", backgroundColor: window.theme.primary, borderColor: window.theme.primary, hoverBackgroundColor: window.theme.primary, hoverBorderColor: window.theme.primary, data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79], barPercentage: .75, categoryPercentage: .5 }] }, options: { maintainAspectRatio: false, legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false }, stacked: false, ticks: { stepSize: 20 } }], xAxes: [{ stacked: false, gridLines: { color: "transparent" } }] } } });
</script>
Requires JavaScript
Section Tables Dark
Component from
Adminkit
Builder
<div class="row removable"> <div class="col-12 col-lg-8 col-xxl-9 drop-zone d-flex"> <div class="card bg-dark flex-fill draggable"> <div class="card-header bg-transparent"> <h5 class="card-title mb-0">Latest Projects</h5> </div> <table class="table table-hover table-dark table-borderless my-0"> <thead> <tr> <th>Name</th> <th class="d-none d-xl-table-cell">Start Date</th> <th class="d-none d-xl-table-cell">End Date</th> <th>Status</th> <th class="d-none d-md-table-cell">Assignee</th> </tr> </thead> <tbody> <tr> <td>Project Apollo</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Vanessa Tucker</td> </tr> <tr> <td>Project Fireball</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-danger">Cancelled</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> <tr> <td>Project Hades</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Sharon Lessman</td> </tr> <tr> <td>Project Nitro</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-warning">In progress</span> </td> <td class="d-none d-md-table-cell">Vanessa Tucker</td> </tr> <tr> <td>Project Phoenix</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> <tr> <td>Project X</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Sharon Lessman</td> </tr> <tr> <td>Project Romeo</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-success">Done</span> </td> <td class="d-none d-md-table-cell">Christina Mason</td> </tr> <tr> <td>Project Wombat</td> <td class="d-none d-xl-table-cell">01/01/2021</td> <td class="d-none d-xl-table-cell">31/06/2021</td> <td> <span class="badge bg-warning">In progress</span> </td> <td class="d-none d-md-table-cell">William Harris</td> </tr> </tbody> </table> </div> </div> <div class="col-12 col-lg-4 col-xxl-3 drop-zone d-flex"> <div class="card bg-dark flex-fill w-100 draggable"> <div class="card-header bg-transparent"> <h5 class="card-title mb-0">Monthly Sales</h5> </div> <div class="card-body d-flex w-100"> <div class="align-self-center chart chart-lg"> <div class="chartjs-size-monitor"> <div class="chartjs-size-monitor-expand"> <div class=""></div> </div> <div class="chartjs-size-monitor-shrink"> <div class=""></div> </div> </div> <canvas id="chartjs-dashboard-bar-dark" width="528" height="700" style="display: block; height: 350px; width: 264px;" class="chartjs-render-monitor"></canvas> </div> </div> </div> </div> </div>
<script>
// Bar chart new Chart(document.getElementById("chartjs-dashboard-bar-dark"), { type: "bar", data: { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "This year", backgroundColor: window.theme.primary, borderColor: window.theme.primary, hoverBackgroundColor: window.theme.primary, hoverBorderColor: window.theme.primary, data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79], barPercentage: .75, categoryPercentage: .5 }] }, options: { maintainAspectRatio: false, legend: { display: false }, scales: { yAxes: [{ gridLines: { display: false }, stacked: false, ticks: { stepSize: 20 } }], xAxes: [{ stacked: false, gridLines: { color: "transparent" } }] } } });
</script>
