Home

Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard Soft UI Dashboard AdminKit Soft UI Design System Soft UI Dashboard Tailwind Asteria Dashboard Chakra UI Dashboard Motion Landing Library React Motion Landing Library Riva Dashboard Tailwind Argon Dashboard
All 663
Forms 12
Charts 21
Navbars 45
Sidebars 27
Typography 42
Components 51
Tables 34
Cards 70
Contact Us 9
Testimonials 19
Cards Section 37
Features 25
Teams Section 11
Faq 9
Headers 45
Blogs 13
Contacts Section 9
Profiles Section 13
Charts Section 7
Tables Section 15
Contents 18
Logo Areas 12
Projects Section 14
Stats 13
Http Codes 6
Authentication 15
Call To Actions 21
Teams 16
Pricing 13

Components - All Examples

Discover 51 Components examples available in Loopple

Input

Argon Dashboard View Theme 
<input class="form-control draggable" placeholder="Input" draggable="true">

Button

Soft UI Dashboard View Theme 
<button class="btn btn-primary draggable">
    Button
</button>

Input Group

Argon Dashboard View Theme 
<div class="form-group draggable">
    <div class="input-group">
      <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
</div>

Badge

Asteria Dashboard View Theme 
<span class="badge bg-success draggable">
    Badge
</span>

Progress

Argon Dashboard View Theme 
<div class="progress-wrapper draggable">
  <div class="progress-info">
    <div class="progress-label">
      <span>Task completed</span>
    </div>
    <div class="progress-percentage">
      <span>60%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  </div>
</div>

Pagination

Argon Dashboard View Theme 
<nav aria-label="..." class="draggable">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" tabindex="-1">
        <i class="fa fa-angle-left"></i>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <i class="fa fa-angle-right"></i>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Tabs

Argon Dashboard View Theme 
<div class="draggable">
    <div class="nav-wrapper">
        <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" role="tablist">
            <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab" data-toggle="tab" href="#tabs-icons-text-1" role="tab" aria-controls="tabs-icons-text-1" aria-selected="true"><i class="fa fa-home mr-2"></i>Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab" data-toggle="tab" href="#tabs-icons-text-2" role="tab" aria-controls="tabs-icons-text-2" aria-selected="false"><i class="fa fa-bell mr-2"></i>Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-3-tab" data-toggle="tab" href="#tabs-icons-text-3" role="tab" aria-controls="tabs-icons-text-3" aria-selected="false"><i class="fa fa-calendar mr-2"></i>Messages</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-icons-text-1" role="tabpanel" aria-labelledby="tabs-icons-text-1-tab">
                <p class="description">Raw denim you probably haven&#39;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&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
            </div>
            <div class="tab-pane fade" id="tabs-icons-text-2" role="tabpanel" aria-labelledby="tabs-icons-text-2-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-icons-text-3" role="tabpanel" aria-labelledby="tabs-icons-text-3-tab">
                <p class="description">Raw denim you probably haven&#39;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

Soft UI Dashboard View Theme 
<input type="text" class="form-control draggable" placeholder="Input" aria-label="Email" aria-describedby="email-addon">

Alert

Asteria Dashboard View Theme 
<div class="alert alert-primary text-white draggable" role="alert">
  A simple primary alert—check it out!
</div>

Input Group

Soft UI Dashboard View Theme 
<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>