Home
Framework
Theme
All
561
Forms
12
Charts
21
Navbars
38
Sidebars
26
Typography
41
Components
51
Tables
34
Cards
63
Cards Section
37
Testimonials
13
Teams Section
11
Faq
4
Headers
36
Blogs
11
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
13
Projects Section
14
Stats
7
Logo Areas
6
Authentication
10
Contact Us
5
Features
19
Pricing
7
Teams
9
Call To Actions
13
Http Codes
2
Components - All Examples
Discover 51 Components examples available in Loopple
Button
<button class="btn btn-primary draggable">Button</button><button class="btn btn-primary draggable">Button</button>Button Icon Right
<Button data-type='Button' rightIcon='{<ArrowForwardIcon/>}' variant='solid'>
Arrow
</Button><Button data-type='Button' rightIcon='{<ArrowForwardIcon/>}' variant='solid'>
Arrow
</Button>Pills
<div class="draggable">
<div class="nav-wrapper">
<ul class="nav nav-pills nav-pills-circle" id="tabs_2" role="tablist">
<li class="nav-item">
<a class="nav-link rounded-circle active" id="home-tab" data-toggle="tab" href="#tabs_2_1" role="tab" aria-controls="home" aria-selected="true">
<span class="nav-link-icon d-block"><i class="fa fa-atom"></i></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#tabs_2_2" role="tab" aria-controls="profile" aria-selected="false">
<span class="nav-link-icon d-block"><i class="fa fa-chart-line"></i></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#tabs_2_3" role="tab" aria-controls="contact" aria-selected="false">
<span class="nav-link-icon d-block"><i class="fa fa-user"></i></span>
</a>
</li>
</ul>
</div>
<div class="card shadow">
<div class="card-body">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="tabs_2_1" role="tabpanel" aria-labelledby="home-tab">
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
<div class="tab-pane fade" id="tabs_2_2" role="tabpanel" aria-labelledby="profile-tab">
<p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="tabs_2_3" role="tabpanel" aria-labelledby="contact-tab">
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
</div>
</div>
</div>
</div>
</div><div class="draggable">
<div class="nav-wrapper">
<ul class="nav nav-pills nav-pills-circle" id="tabs_2" role="tablist">
<li class="nav-item">
<a class="nav-link rounded-circle active" id="home-tab" data-toggle="tab" href="#tabs_2_1" role="tab" aria-controls="home" aria-selected="true">
<span class="nav-link-icon d-block"><i class="fa fa-atom"></i></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#tabs_2_2" role="tab" aria-controls="profile" aria-selected="false">
<span class="nav-link-icon d-block"><i class="fa fa-chart-line"></i></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#tabs_2_3" role="tab" aria-controls="contact" aria-selected="false">
<span class="nav-link-icon d-block"><i class="fa fa-user"></i></span>
</a>
</li>
</ul>
</div>
<div class="card shadow">
<div class="card-body">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="tabs_2_1" role="tabpanel" aria-labelledby="home-tab">
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
</div>
<div class="tab-pane fade" id="tabs_2_2" role="tabpanel" aria-labelledby="profile-tab">
<p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="tabs_2_3" role="tabpanel" aria-labelledby="contact-tab">
<p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
</div>
</div>
</div>
</div>
</div>Input
<input type="text" class="form-control mb-4 draggable" placeholder="Input" aria-label="Email" aria-describedby="email-addon"><input type="text" class="form-control mb-4 draggable" placeholder="Input" aria-label="Email" aria-describedby="email-addon">Input Group
<div class="form-group mb-4 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><div class="form-group mb-4 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
<div class="dropdown draggable">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Primary </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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><div class="dropdown draggable">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Primary </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>Dropdown
<div class="dropdown draggable">
<button class="btn btn-dark dropdown-toggle mr-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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 class="dropdown draggable">
<button class="btn btn-dark dropdown-toggle mr-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>Carousel
Progress
<div class="progress-wrapper mb-4 draggable">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">80%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-syccess w-80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div><div class="progress-wrapper mb-4 draggable">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">80%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-syccess w-80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>Button
<button class="btn btn-dark draggable">Button</button><button class="btn btn-dark draggable">Button</button>