Framework
Theme
All
380
Forms
9
Navbars
27
Sidebars
19
Components
27
Tables
24
Teams Section
8
Typography
24
Headers
30
Cards
38
Cards Section
28
Contacts Section
9
Profiles Section
8
Charts
14
Tables Section
11
Projects Section
10
Charts Section
4
Testimonials
9
Faq
1
Blogs
11
Contents
10
Stats
4
Authentication
7
Features
16
Teams
5
Call To Actions
9
Logo Areas
3
Contact Us
2
Pricing
4
Bootstrap - All Components
Discover 380 Bootstrap components available in Loopple
Sidebar Complex
Component from
Adminkit
Builder
<div class="sidebar-content js-simplebar" data-simplebar="init">
<div class="simplebar-wrapper" style="margin: 0px;">
<div class="simplebar-height-auto-observer-wrapper">
<div class="simplebar-height-auto-observer"></div>
</div>
<div class="simplebar-mask">
<div class="simplebar-offset" style="right: 0px; bottom: 0px;">
<div class="simplebar-content-wrapper" style="height: 100%; overflow: hidden scroll;">
<div class="simplebar-content" style="padding: 0px;">
<a class="sidebar-brand" href="javascript:;">
<span class="align-middle">AdminKit</span>
</a>
<ul class="sidebar-nav">
<li class="sidebar-header"> Pages </li>
<li class="sidebar-item active">
<a class="sidebar-link" href="javascript:;">
<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-sliders align-middle">
<line x1="4" y1="21" x2="4" y2="14"></line>
<line x1="4" y1="10" x2="4" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12" y2="3"></line>
<line x1="20" y1="21" x2="20" y2="16"></line>
<line x1="20" y1="12" x2="20" y2="3"></line>
<line x1="1" y1="14" x2="7" y2="14"></line>
<line x1="9" y1="8" x2="15" y2="8"></line>
<line x1="17" y1="16" x2="23" y2="16"></line>
</svg>
<span class="align-middle">Dashboard</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="javascript:;">
<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-user align-middle">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span class="align-middle">Profile</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="javascript:;">
<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-log-in align-middle">
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
<polyline points="10 17 15 12 10 7"></polyline>
<line x1="15" y1="12" x2="3" y2="12"></line>
</svg>
<span class="align-middle">Sign In</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="javascript:;">
<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-user-plus align-middle">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
<span class="align-middle">Sign Up</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="javascript:;">
<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-book align-middle">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
<span class="align-middle">Blank</span>
</a>
</li>
<li class="sidebar-header"> Tools & Components </li>
<li class="sidebar-item">
<a class="sidebar-link" href="javascript:;">
<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-square align-middle">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
</svg>
<span class="align-middle">Buttons</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="javascript:;">
<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-check-square align-middle">
<polyline points="9 11 12 14 22 4"></polyline>
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
</svg>
<span class="align-middle">Forms</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="javascript:;">
<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-grid align-middle">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
<span class="align-middle">Cards</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="javascript:;">
<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-align-left align-middle">
<line x1="17" y1="10" x2="3" y2="10"></line>
<line x1="21" y1="6" x2="3" y2="6"></line>
<line x1="21" y1="14" x2="3" y2="14"></line>
<line x1="17" y1="18" x2="3" y2="18"></line>
</svg>
<span class="align-middle">Typography</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="javascript:;">
<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-coffee align-middle">
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
<line x1="6" y1="1" x2="6" y2="4"></line>
<line x1="10" y1="1" x2="10" y2="4"></line>
<line x1="14" y1="1" x2="14" y2="4"></line>
</svg>
<span class="align-middle">Icons</span>
</a>
</li>
<li class="sidebar-header"> Plugins & Addons </li>
<li class="sidebar-item">
<a class="sidebar-link" href="javascript:;">
<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-bar-chart-2 align-middle">
<line x1="18" y1="20" x2="18" y2="10"></line>
<line x1="12" y1="20" x2="12" y2="4"></line>
<line x1="6" y1="20" x2="6" y2="14"></line>
</svg>
<span class="align-middle">Charts</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="javascript:;">
<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 align-middle">
<polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon>
<line x1="8" y1="2" x2="8" y2="18"></line>
<line x1="16" y1="6" x2="16" y2="22"></line>
</svg>
<span class="align-middle">Maps</span>
</a>
</li>
</ul>
<div class="sidebar-cta">
<div class="sidebar-cta-content">
<strong class="d-inline-block mb-2">AdminKit </strong>
<div class="mb-3 text-sm"> Are you looking for a beautiful Dashboard? Check out our premium version. </div>
<div class="d-grid">
<a href="javascript:;" class="btn btn-primary">AdminKit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="simplebar-placeholder" style="width: auto; height: 957px;"></div>
</div>
<div class="simplebar-track simplebar-horizontal" style="visibility: hidden;">
<div class="simplebar-scrollbar" style="width: 0px; display: none;"></div>
</div>
<div class="simplebar-track simplebar-vertical" style="visibility: visible;">
<div class="simplebar-scrollbar" style="height: 794px; transform: translate3d(0px, 0px, 0px); display: block;"></div>
</div>
</div>Section Card Stats
Component from
Adminkit
Builder
<div class="row removable">
<div class="col-sm-3 drop-zone">
<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>
</div>
<div class="col-sm-3 drop-zone">
<div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">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">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-muted">Since last week</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3 drop-zone">
<div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">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">$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-muted">Since last week</span>
</div>
</div>
</div>
</div>
<div class="col-sm-3 drop-zone">
<div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">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">64</h1>
<div class="mb-0">
<span class="text-danger">
<i class="mdi mdi-arrow-bottom-right"></i> -2.25% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
</div>
</div>
</div>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>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>Modal
Component from
Adminkit
Builder
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary draggable" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>