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
Header With Navbar And Image
Component from
Motion Landing Library
Builder
<div class="container flex flex-col mx-auto draggable">
<div class="relative flex flex-wrap items-center justify-between w-full bg-white group py-7 shrink-0">
<div>
<img class="h-8" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-nav-0.png"></img>
</div>
<div class="items-center justify-between hidden gap-12 text-black md:flex">
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Product</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Features</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Pricing</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Company</a>
</div>
<div class="items-center hidden gap-8 md:flex">
<button class="flex items-center text-sm font-normal text-gray-800 hover:text-gray-900 transition duration-300">Log In</button>
<button class="flex items-center px-4 py-2 text-sm font-bold rounded-xl bg-purple-blue-100 text-purple-blue-600 hover:bg-purple-blue-600 hover:text-white transition duration-300">
Sign Up
</button>
</div>
<button onclick="(() => { this.closest('.group').classList.toggle('open')})()" class="flex md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H3C2.73478 6 2.48043 6.10536 2.29289 6.29289C2.10536 6.48043 2 6.73478 2 7C2 7.26522 2.10536 7.51957 2.29289 7.70711C2.48043 7.89464 2.73478 8 3 8ZM21 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z" fill="black"/>
</svg>
</button>
<div class="absolute flex md:hidden transition-all duration-300 ease-in-out flex-col items-start shadow-main justify-center w-full gap-3 overflow-hidden bg-white max-h-0 group-[.open]:py-4 px-4 rounded-2xl group-[.open]:max-h-64 top-full">
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Product</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Features</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Pricing</a>
<a class="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Company</a>
<button class="flex items-center text-sm font-normal text-black">Log In</button>
<button class="flex items-center px-4 py-2 text-sm font-bold rounded-xl bg-purple-blue-100 text-purple-blue-600 hover:bg-purple-blue-600 hover:text-white transition duration-300">Sign Up</button>
</div>
</div>
<div class="grid w-full grid-cols-1 my-auto mt-12 mb-8 md:grid-cols-2 xl:gap-14 md:gap-5">
<div class="flex flex-col justify-center col-span-1 text-center lg:text-start">
<div class="flex items-center justify-center mb-4 lg:justify-normal">
<img class="h-5" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-1.png" alt="logo">
<h4 class="ml-2 text-sm font-bold tracking-widest text-primary uppercase">Explore the Latest Tailwind Template</h4>
</div>
<h1 class="mb-8 text-4xl font-extrabold leading-tight lg:text-6xl text-dark-grey-900 font-display">Elevate your website with Motion</h1>
<p class="mb-6 text-base font-normal leading-7 lg:w-3/4 text-grey-900">
Say goodbye to endless hours spent on building templates from scratch. Experience the quickest, most responsive, and trendiest dashboard solution available. Seriously.
</p>
<div class="flex flex-col items-center gap-4 lg:flex-row">
<button class="flex items-center py-4 text-sm font-bold text-white px-7 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300 rounded-xl">Get started now</button>
<button class="flex items-center py-4 text-sm font-medium px-7 text-dark-grey-700 hover:text-dark-grey-900 transition duration-300 rounded-2xl">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-2">
<path fill-rule="evenodd" d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z" clip-rule="evenodd" />
</svg>
Book a free call
</button>
</div>
</div>
<div class="items-center justify-end hidden col-span-1 md:flex">
<img class="w-4/5 rounded-md" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/header-1.png" alt="header image">
</div>
</div>
</div>Navbar Simple
Component from
Asteria Dashboard
Builder
<div class="container-fluid py-2 px-5">
<div class="pe-md-3 d-flex align-items-center">
<div class="input-group">
<span class="input-group-text border-0 text-body bg-transparent"><i class="fas fa-search" aria-hidden="true"></i></span>
<input type="text" class="form-control border-0 bg-transparent" placeholder="Search here...">
</div>
</div>
<div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
<ul class="navbar-nav ms-auto justify-content-end">
<li class="nav-item me-sm-2 pe-2 pe-2 d-flex align-items-center">
<a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton">
Discover
</a>
</li>
<li class="nav-item me-sm-2 pe-2 pe-2 d-flex align-items-center">
<a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton">Blog</a>
</li>
<li class="nav-item me-sm-2 pe-2 pe-2 d-flex align-items-center">
<a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton">Login</a>
</li>
<li class="nav-item dropdown d-flex ps-sm-2 align-items-center position-relative">
<hr class="vertical dark my-0 start-0">
<a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuUser" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80" class="avatar avatar-sm shadow-sm mx-2" alt="avatar">
</a>
<ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n2" aria-labelledby="dropdownMenuUser">
<li class="position-relative">
<div class="dropdown-header pt-0">
<h6 class="mb-0">Andrew Millo</h6>
<p class="mb-0 text-sm">[email protected]</p>
</div>
<hr class="horizontal dark mt-1 mb-2">
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Account</span>
</a>
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Settings</span>
</a>
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Payments</span>
</a>
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Log out</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
Requires JavaScript
Chart Bar
Component from
Argon Dashboard
Builder
<div class="card draggable"> <div class="card-header bg-transparent"> <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6> <h5 class="h3 mb-0">Total orders</h5> </div> <div class="card-body"> <div class="chart"> <canvas id="chart-bars" class="chart-bar chart-canvas"></canvas> </div> </div> </div>
<script>
var chartsBar = document.querySelectorAll(".chart-bar"); chartsBar.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "bar", data: { labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [ { label: "Sales", tension: 0.4, borderWidth: 0, pointRadius: 0, backgroundColor: "#fb6340", data: [25, 20, 30, 22, 17, 29], maxBarThickness: 10, }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [ { gridLines: { borderDash: [2], borderDashOffset: [2], drawTicks: false, drawBorder: false, lineWidth: 1, zeroLineWidth: 0, zeroLineBorderDash: [0], zeroLineBorderDashOffset: [2], }, ticks: { beginAtZero: true, padding: 10, fontSize: 13, lineHeight: 5, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], xAxes: [ { gridLines: { display: false, drawBorder: false, drawOnChartArea: false, drawTicks: false, }, ticks: { padding: 20, fontSize: 13, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], }, }, }); chart.setAttribute("data-chart-initialized", "true"); } });
</script>
Section Card Stats Dark
Component from
Adminkit
Builder
<div class="row removable">
<div class="col-sm-3 drop-zone">
<div class="card bg-dark text-white draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title text-white opacity-9">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 text-white">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-white opacity-8">Since last week</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3 drop-zone">
<div class="card bg-dark text-white draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title text-white opacity-9">Visitors</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-users align-middle">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3 text-white">14.212</h1>
<div class="mb-0">
<span class="text-success">
<i class="mdi mdi-arrow-bottom-right"></i> 5.25% </span>
<span class="text-white opacity-8">Since last week</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3 drop-zone">
<div class="card bg-dark text-white draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title text-white opacity-9">Earnings</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-dollar-sign align-middle">
<line x1="12" y1="1" x2="12" y2="23"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3 text-white">$21.300</h1>
<div class="mb-0">
<span class="text-success">
<i class="mdi mdi-arrow-bottom-right"></i> 6.65% </span>
<span class="text-white opacity-8">Since last week</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3 drop-zone">
<div class="card bg-dark text-white draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title text-white opacity-9">Orders</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-shopping-cart align-middle">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3 text-white">64</h1>
<div class="mb-0">
<span class="text-danger">
<i class="mdi mdi-arrow-bottom-right"></i> -2.25% </span>
<span class="text-white opacity-8">Since last week</span>
</div>
</div>
</div>
</div>
</div>
Requires JavaScript
Section Charts
Component from
Argon Dashboard
Builder
<div class="row removable"> <div class="col-xl-8 drop-zone"> <div class="card bg-default draggable"> <div class="card-header bg-transparent"> <div class="row align-items-center"> <div class="col"> <h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6> <h5 class="h3 text-white mb-0">Sales value</h5> </div> <div class="col"> <ul class="nav nav-pills justify-content-end"> <li class="nav-item mr-2 mr-md-0" data-toggle="chart" data-target="#chart-sales-dark" data-update="{"data":{"datasets":[{"data":[0, 20, 10, 30, 15, 40, 20, 60, 60]}]}}" data-prefix="$" data-suffix="k"> <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab"> <span class="d-none d-md-block">Month</span> <span class="d-md-none">M</span> </a> </li> <li class="nav-item" data-toggle="chart" data-target="#chart-sales-dark" data-update="{"data":{"datasets":[{"data":[0, 20, 5, 25, 10, 30, 15, 40, 40]}]}}" data-prefix="$" data-suffix="k"> <a href="#" class="nav-link py-2 px-3" data-toggle="tab"> <span class="d-none d-md-block">Week</span> <span class="d-md-none">W</span> </a> </li> </ul> </div> </div> </div> <div class="card-body"> <!-- Chart --> <div class="chart"> <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> <!-- Chart wrapper --> <canvas id="chart-sales-dark" class="chart-line chart-canvas chartjs-render-monitor" width="1342" height="700" style="display: block; height: 350px; width: 671px;"></canvas> </div> </div> </div> </div> <div class="col-xl-4 drop-zone"> <div class="card draggable"> <div class="card-header bg-transparent"> <div class="row align-items-center"> <div class="col"> <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6> <h5 class="h3 mb-0">Total orders</h5> </div> </div> </div> <div class="card-body"> <!-- Chart --> <div class="chart"> <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="chart-bars" class="chart-bar chart-canvas chartjs-render-monitor" style="display: block; height: 350px; width: 297px;" width="594" height="700"></canvas> </div> </div> </div> </div> </div>
<script>
var chartsLine = document.querySelectorAll(".chart-line"); chartsLine.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "line", data: { labels: ["May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Performance", tension: 0.4, borderWidth: 4, borderColor: "#5e72e4", pointRadius: 0, backgroundColor: "transparent", data: [0, 20, 10, 30, 15, 40, 20, 60, 60], }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 0, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], xAxes: [{ barPercentage: 1.6, gridLines: { drawBorder: false, color: "rgba(29,140,248,0.0)", zeroLineColor: "transparent", }, ticks: { padding: 10, fontColor: "#8898aa", fontSize: 13, fontFamily: "Open Sans", }, }, ], }, layout: { padding: 0, }, }, }); chart.setAttribute("data-chart-initialized", "true"); } }); var chartsBar = document.querySelectorAll(".chart-bar"); chartsBar.forEach(function(chart) { if (!chart.getAttribute('data-chart-initialized')) { new Chart(chart, { type: "bar", data: { labels: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [ { label: "Sales", tension: 0.4, borderWidth: 0, pointRadius: 0, backgroundColor: "#fb6340", data: [25, 20, 30, 22, 17, 29], maxBarThickness: 10, }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [ { gridLines: { borderDash: [2], borderDashOffset: [2], drawTicks: false, drawBorder: false, lineWidth: 1, zeroLineWidth: 0, zeroLineBorderDash: [0], zeroLineBorderDashOffset: [2], }, ticks: { beginAtZero: true, padding: 10, fontSize: 13, lineHeight: 5, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], xAxes: [ { gridLines: { display: false, drawBorder: false, drawOnChartArea: false, drawTicks: false, }, ticks: { padding: 20, fontSize: 13, fontColor: "#8898aa", fontFamily: "Open Sans", }, }, ], }, }, }); chart.setAttribute("data-chart-initialized", "true"); } });
</script>
Call To Action With Text And Subscribe Input
Component from
Motion Landing Library React
Builder
<div data-type='div' className="container mx-auto draggable">
<div data-type='div' className="flex flex-col items-center justify-center w-full h-full my-auto text-center">
<h2 data-type='h2' className="w-full mb-4 text-4xl font-extrabold leading-tight text-dark-grey-900">
Unlock Motion's Immediate Benefits
</h2>
<p data-type='p' className="mb-10 text-lg font-normal lg:w-6/12 text-grey-700">
Experience Motion like never before with instant access. Our platform
offers unparalleled features and advantages to elevate your experience.
</p>
<div data-type='div' className="flex flex-col items-center justify-center w-full gap-4 mb-4 md:flex-row">
<div data-type='div' className="relative flex items-center">
<span data-type='span' className="absolute ml-3">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-5 h-5 text-grey-700"
>
<path data-type='path'
strokeLinecap="round"
d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
/>
</svg>
</span>
<input data-type='input'
type="search"
placeholder="E-mail address"
className="flex items-center py-2 pl-10 pr-3 text-sm font-medium border border-solid outline-none grow placeholder:text-dark-grey-500 placeholder:text-sm placeholder:font-medium border-grey-500 focus:border-grey-600 text-dark-grey-900 rounded-xl"
/>
</div>
<button data-type='button' className="flex items-center px-4 py-2 text-sm font-bold text-white border rounded-xl border-purple-blue-500 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">
Get Free Access
</button>
</div>
</div>
</div>Section Card Stats
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Total traffic</h5>
<span class="h2 font-weight-bold mb-0">350,897</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
<i class="fa fa-user"></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>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<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-gradient-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>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Sales</h5>
<span class="h2 font-weight-bold mb-0">924</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
<i class="fa fa-coins"></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>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card card-stats draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
<span class="h2 font-weight-bold mb-0">49,65%</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
<i class="fa fa-chart-bar"></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>
</div>
</div>Section Card Stats Gradient
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-primary border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Tasks completed</h5>
<span class="h2 font-weight-bold mb-0 text-white">8/24</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-info border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Contacts</h5>
<span class="h2 font-weight-bold mb-0 text-white">123/267</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-danger border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Items sold</h5>
<span class="h2 font-weight-bold mb-0 text-white">200/300</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card bg-gradient-default border-0 draggable">
<!-- Card body -->
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0 text-white">Notifications</h5>
<span class="h2 font-weight-bold mb-0 text-white">50/62</span>
<div class="progress progress-xs mt-3 mb-0">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-neutral mr-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-h"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-sm">
<a href="#!" class="text-nowrap text-white font-weight-600">See details</a>
</p>
</div>
</div>
</div>
</div>Header Profile
Component from
Argon Dashboard
Builder
<div class="header d-flex align-items-center rounded-lg removable draggable" style="min-height: 500px; background-image: url(https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
<!-- Mask -->
<span class="mask bg-gradient-default rounded-lg opacity-8"></span>
<!-- Header container -->
<div class="container-fluid d-flex align-items-center">
<div class="row">
<div class="col-lg-7 col-md-10">
<h1 class="display-2 text-white">Hello Jesse</h1>
<p class="text-white mt-0 mb-5">This is your profile page. You can see the progress you have made with your work and manage your projects or assigned tasks</p>
<a href="#!" class="btn btn-neutral">Edit profile</a>
</div>
</div>
</div>
</div>Table
Component from
Chakra UI Dashboard
Builder
<TableContainer data-type='TableContainer'>
<Table data-type='Table' variant='simple'>
<Thead data-type='Thead'>
<Tr data-type='Tr'>
<Th data-type='Th'>To convert</Th>
<Th data-type='Th'>into</Th>
<Th data-type='Th'>multiply by</Th>
</Tr>
</Thead>
<Tbody data-type='Tbody'>
<Tr data-type='Tr'>
<Td data-type='Td'>inches</Td>
<Td data-type='Td'>millimetres (mm)</Td>
<Td data-type='Td' isNumeric>25.4</Td>
</Tr>
<Tr data-type='Tr'>
<Td data-type='Td'>feet</Td>
<Td data-type='Td'>centimetres (cm)</Td>
<Td data-type='Td' isNumeric>30.48</Td>
</Tr>
<Tr data-type='Tr'>
<Td data-type='Td'>yards</Td>
<Td data-type='Td'>metres (m)</Td>
<Td data-type='Td' isNumeric>0.91444</Td>
</Tr>
</Tbody>
<Tfoot data-type='Tfoot'>
<Tr data-type='Tr'>
<Th data-type='Th'>To convert</Th>
<Th data-type='Th'>into</Th>
<Th data-type='Th' isNumeric>multiply by</Th>
</Tr>
</Tfoot>
</Table>
</TableContainer>