Framework
Theme
All
683
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
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 683 components available in Loopple’s library! Create modern templates without creativity of a designer
Input
Component from
Argon Dashboard
Builder
<input class="form-control draggable" placeholder="Input" draggable="true">Feature With 3 Cards
Component from
Motion Landing Library React
Builder
<div data-type='div' className="h-full mx-auto lg:container draggable">
<div data-type='div' className="flex flex-col items-center justify-center h-full">
<div data-type='div' className="grid grid-cols-1 gap-10 mt-20 lg:grid-cols-3 px-5">
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M22.8233 8C22.8233 7.28 22.4533 6.65 21.8833 6.3L12.8333 1L3.78331 6.3C3.21331 6.65 2.83331 7.28 2.83331 8V18C2.83331 19.1 3.73331 20 4.83331 20H20.8333C21.9333 20 22.8333 19.1 22.8333 18L22.8233 8ZM20.8233 8V8.01L12.8333 13L4.83331 8L12.8333 3.32L20.8233 8ZM4.83331 18V10.34L12.8333 15.36L20.8233 10.37L20.8333 18H4.83331Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Seamless Web Integration
</h4>
<p data-type='p' className="font-medium text-grey-700">
Integrate our shared team inboxes seamlessly with your website.
Enhance the user experience and provide efficient communication
channels.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5 bg-white shadow-main rounded-3xl">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M3.28996 14.78L3.19996 14.69C2.80996 14.3 2.80996 13.67 3.19996 13.28L9.28996 7.18C9.67996 6.79 10.31 6.79 10.7 7.18L13.99 10.47L20.38 3.29C20.76 2.86 21.43 2.85 21.83 3.25C22.2 3.63 22.22 4.23 21.87 4.62L14.7 12.69C14.32 13.12 13.66 13.14 13.25 12.73L9.99996 9.48L4.69996 14.78C4.31996 15.17 3.67996 15.17 3.28996 14.78ZM4.69996 20.78L9.99996 15.48L13.25 18.73C13.66 19.14 14.32 19.12 14.7 18.69L21.87 10.62C22.22 10.23 22.2 9.63 21.83 9.25C21.43 8.85 20.76 8.86 20.38 9.29L13.99 16.47L10.7 13.18C10.31 12.79 9.67996 12.79 9.28996 13.18L3.19996 19.28C2.80996 19.67 2.80996 20.3 3.19996 20.69L3.28996 20.78C3.67996 21.17 4.31996 21.17 4.69996 20.78Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Effortless Team Management
</h4>
<p data-type='p' className="font-medium text-grey-700">
Manage your team effortlessly with our shared team inboxes. Simplify
team reporting and ensure smooth operations.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M15.8766 12.71C16.857 11.9387 17.5726 10.8809 17.9239 9.68394C18.2751 8.48697 18.2445 7.21027 17.8364 6.03147C17.4283 4.85267 16.6629 3.83039 15.6467 3.10686C14.6305 2.38332 13.4141 1.99451 12.1666 1.99451C10.9192 1.99451 9.70274 2.38332 8.68655 3.10686C7.67037 3.83039 6.90497 4.85267 6.49684 6.03147C6.0887 7.21027 6.05814 8.48697 6.40938 9.68394C6.76063 10.8809 7.47623 11.9387 8.45662 12.71C6.7767 13.383 5.31091 14.4994 4.21552 15.9399C3.12012 17.3805 2.43619 19.0913 2.23662 20.89C2.22218 21.0213 2.23374 21.1542 2.27065 21.2811C2.30756 21.4079 2.36909 21.5263 2.45173 21.6293C2.61864 21.8375 2.86141 21.9708 3.12662 22C3.39184 22.0292 3.65778 21.9518 3.86595 21.7849C4.07411 21.618 4.20745 21.3752 4.23662 21.11C4.45621 19.1552 5.38831 17.3498 6.85484 16.0388C8.32137 14.7278 10.2195 14.003 12.1866 14.003C14.1537 14.003 16.0519 14.7278 17.5184 16.0388C18.9849 17.3498 19.917 19.1552 20.1366 21.11C20.1638 21.3557 20.2811 21.5827 20.4657 21.747C20.6504 21.9114 20.8894 22.0015 21.1366 22H21.2466C21.5088 21.9698 21.7483 21.8373 21.9132 21.6313C22.078 21.4252 22.1547 21.1624 22.1266 20.9C21.9261 19.0962 21.2385 17.381 20.1375 15.9382C19.0364 14.4954 17.5635 13.3795 15.8766 12.71ZM12.1666 12C11.3755 12 10.6021 11.7654 9.94434 11.3259C9.28655 10.8864 8.77385 10.2616 8.4711 9.53074C8.16835 8.79983 8.08914 7.99557 8.24348 7.21964C8.39782 6.44372 8.77879 5.73099 9.3382 5.17158C9.89761 4.61217 10.6103 4.2312 11.3863 4.07686C12.1622 3.92252 12.9665 4.00173 13.6974 4.30448C14.4283 4.60724 15.053 5.11993 15.4925 5.77772C15.932 6.43552 16.1666 7.20888 16.1666 8C16.1666 9.06087 15.7452 10.0783 14.9951 10.8284C14.2449 11.5786 13.2275 12 12.1666 12Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Gain Insights with Analytics
</h4>
<p data-type='p' className="font-medium text-grey-700">
Gain valuable insights and data analytics for your team through our
analytics dashboard. Make informed decisions and track your progress
effectively.
</p>
</div>
</div>
</div>
</div>
</div>Button
Component from
Soft UI Dashboard
Builder
<button class="btn btn-primary draggable">
Button
</button>Button
Component from
Adminkit
Builder
<button type="button" class="btn btn-primary draggable">Primary</button>Input
Component from
Adminkit
Builder
<input type="text" class="form-control draggable" placeholder="Input" aria-label="Email" aria-describedby="email-addon">Section Profile
Component from
Adminkit
Builder
<div class="row removable">
<div class="col-md-4 col-xl-3 drop-zone">
<div class="card mb-3 draggable">
<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>
<hr class="my-0">
<div class="card-body">
<h5 class="h6 card-title">Elsewhere</h5>
<ul class="list-unstyled mb-0">
<li class="mb-1">
<a href="#">staciehall.co</a>
</li>
<li class="mb-1">
<a href="#">Twitter</a>
</li>
<li class="mb-1">
<a href="#">Facebook</a>
</li>
<li class="mb-1">
<a href="#">Instagram</a>
</li>
<li class="mb-1">
<a href="#">LinkedIn</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8 col-xl-9 drop-zone">
<div class="card draggable">
<div class="card-header">
<h5 class="card-title mb-0">Activities</h5>
</div>
<div class="card-body h-100">
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Vanessa Tucker">
<div class="flex-grow-1">
<small class="float-end text-navy">5m ago</small>
<strong>Vanessa Tucker</strong> started following <strong>Christina Mason</strong>
<br>
<small class="text-muted">Today 7:51 pm</small>
<br>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
<div class="flex-grow-1">
<small class="float-end text-navy">30m ago</small>
<strong>Charles Hall</strong> posted something on <strong>Christina Mason</strong>'s timeline <br>
<small class="text-muted">Today 7:21 pm</small>
<div class="border text-sm text-muted p-2 mt-1"> Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </div>
<a href="#" class="btn btn-sm btn-danger mt-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-heart feather-sm">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg> Like </a>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
<div class="flex-grow-1">
<small class="float-end text-navy">1h ago</small>
<strong>Christina Mason</strong> posted a new blog <br>
<small class="text-muted">Today 6:35 pm</small>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="William Harris">
<div class="flex-grow-1">
<small class="float-end text-navy">3h ago</small>
<strong>William Harris</strong> posted two photos on <strong>Christina Mason</strong>'s timeline <br>
<small class="text-muted">Today 5:12 pm</small>
<div class="row g-0 mt-1">
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<img src="https://demo-basic.adminkit.io/img/photos/unsplash-1.jpg" class="img-fluid pe-2" alt="Unsplash">
</div>
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<img src="https://demo-basic.adminkit.io/img/photos/unsplash-2.jpg" class="img-fluid pe-2" alt="Unsplash">
</div>
</div>
<a href="#" class="btn btn-sm btn-danger mt-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-heart feather-sm">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg> Like </a>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="William Harris">
<div class="flex-grow-1">
<small class="float-end text-navy">1d ago</small>
<strong>William Harris</strong> started following <strong>Christina Mason</strong>
<br>
<small class="text-muted">Yesterday 3:12 pm</small>
<div class="d-flex align-items-start mt-1">
<a class="pe-3" href="#">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
</a>
<div class="flex-grow-1">
<div class="border text-sm text-muted p-2 mt-1"> Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. </div>
</div>
</div>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
<div class="flex-grow-1">
<small class="float-end text-navy">1d ago</small>
<strong>Christina Mason</strong> posted a new blog <br>
<small class="text-muted">Yesterday 2:43 pm</small>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
<div class="flex-grow-1">
<small class="float-end text-navy">1d ago</small>
<strong>Charles Hall</strong> started following <strong>Christina Mason</strong>
<br>
<small class="text-muted">Yesterdag 1:51 pm</small>
</div>
</div>
<hr>
<div class="d-grid">
<a href="#" class="btn btn-primary">Load more</a>
</div>
</div>
</div>
</div>
</div>Section Project
Component from
Adminkit
Builder
<div class="row removable">
<div class="col-md-4 drop-zone">
<div class="card mb-3 draggable">
<img src="https://images.unsplash.com/photo-1527219525722-f9767a7f2884?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mjl8fHByb2plY3R8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Slack</h5>
<p class="card-text">This project is about integrating a new chat system to slack platform.</p>
<a href="#" class="badge bg-info me-1 my-1">IOS App</a>
<a href="#" class="badge bg-primary me-1 my-1">Desktop App</a>
</div>
<div class="card-footer">
<div class="mb-1 d-flex align-items-center">
<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-file align-middle me-2">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
<polyline points="13 2 13 9 20 9"></polyline>
</svg>
<span>Attach file</span>
</div>
</div>
</div>
</div>
<div class="col-md-8 drop-zone">
<div class="card draggable">
<div class="card-header">
<h5 class="card-title mb-0">Activities</h5>
</div>
<div class="card-body h-100">
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Vanessa Tucker">
<div class="flex-grow-1">
<small class="float-end text-navy">5m ago</small>
<strong>Vanessa Tucker</strong> added 2 new files to <strong>Loopple Update</strong>
<br>
<small class="text-muted">Today 7:51 pm</small>
<br>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Charles Hall">
<div class="flex-grow-1">
<small class="float-end text-navy">30m ago</small>
<strong>Charles Hall</strong> added a new comment to <strong>AdminKit</strong>#&39;s v2.9.1 Update <br>
<small class="text-muted">Today 7:21 pm</small>
<div class="border text-sm text-muted p-2 mt-1"> Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. </div>
<a href="#" class="btn btn-sm btn-info mt-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-tag align-middle me-2">
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
<line x1="7" y1="7" x2="7.01" y2="7"></line>
</svg> View more </a>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Christina Mason">
<div class="flex-grow-1">
<small class="float-end text-navy">1h ago</small>
<strong>Christina Mason</strong> finished tasks <br>
<small class="text-muted">Today 6:35 pm</small>
</div>
</div>
<hr>
<div class="d-flex align-items-start">
<img src="https://demo-basic.adminkit.io/img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="William Harris">
<div class="flex-grow-1">
<small class="float-end text-navy">3h ago</small>
<strong>William Harris</strong> posted three updates on <strong>Slack code refactoring</strong>
<br>
<small class="text-muted">Today 5:12 pm</small>
<ul>
<li class="nav-item"> Fix channels new messages loading error </li>
<li class="nav-item"> Added view last 100 messages option </li>
</ul>
<a href="#" class="btn btn-sm btn-info mt-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-tag align-middle me-2">
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
<line x1="7" y1="7" x2="7.01" y2="7"></line>
</svg> View more </a>
</div>
</div>
<hr>
<div class="d-grid">
<a href="#" class="btn btn-primary">Load more</a>
</div>
</div>
</div>
</div>
</div>Input Group
Component from
Adminkit
Builder
<div class="form-group draggable">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>Dropdown
Component from
Adminkit
Builder
<div class="dropdown draggable">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
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>