Framework
Theme
All
689
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
General
6
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 689 components available in Loopple’s library! Create modern templates without creativity of a designer
Pricing Section With Title Description And Cards
Feature 1
Component from
Soft UI Design System
Builder
<section class="py-4 draggable">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3 class="text-gradient text-primary mb-0 mt-2">Read More About Us</h3>
<h3>The most important</h3>
<p>Pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
<a href="javascript:;" class="text-primary icon-move-right">More about us
<i class="fas fa-arrow-right text-sm ms-1"></i>
</a>
</div>
<div class="col-lg-6 mt-lg-0 mt-5 ps-lg-0 ps-0">
<div class="p-3 info-horizontal">
<div class="icon icon-shape rounded-circle bg-gradient-primary shadow text-center">
<i class="fas fa-ship opacity-10"></i>
</div>
<div class="description ps-3">
<p class="mb-0">It becomes harder for us to give others a hand. <br> We get our heart broken by people we love.</p>
</div>
</div>
<div class="p-3 info-horizontal">
<div class="icon icon-shape rounded-circle bg-gradient-primary shadow text-center">
<i class="fas fa-handshake opacity-10"></i>
</div>
<div class="description ps-3">
<p class="mb-0">As we live, our hearts turn colder. <br>Cause pain is what we go through as we become older.</p>
</div>
</div>
<div class="p-3 info-horizontal">
<div class="icon icon-shape rounded-circle bg-gradient-primary shadow text-center">
<i class="fas fa-hourglass opacity-10"></i>
</div>
<div class="description ps-3">
<p class="mb-0">When we lose family over time. <br> What else could rust the heart more over time? Blackgold.</p>
</div>
</div>
</div>
</div>
</div>
</section>Footer 4
Header 3
Feature 2
Component from
Soft UI Design System
Builder
<section class="py-4 draggable">
<div class="container">
<div class="row">
<div class="col-md-4 col-10 mx-auto">
<div class="p-3 text-center">
<img class="w-50 mb-3" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/medium-logos/logo-google.svg">
<p>We get insulted by others, lose trust for those others. We get back here to follow my dreams</p>
<a href="javascript:;" class="icon-move-right text-dark text-sm">Read more
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
<div class="col-md-4 col-10 mx-auto">
<div class="p-3 text-center">
<img class="w-50 mb-3" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/medium-logos/logo-vodafone.svg">
<p>We get insulted by others, lose trust for those others. We get back here to follow my dreams</p>
<a href="javascript:;" class="icon-move-right text-dark text-sm">Read more
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
<div class="col-md-4 col-10 mx-auto">
<div class="p-3 text-center">
<img class="w-50 mb-3" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/medium-logos/logo-coinbase.svg">
<p>We get insulted by others, lose trust for those others. We get back here to follow my dreams</p>
<a href="javascript:;" class="icon-move-right text-dark text-sm">Read more
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</section>Header 6
Sign In Basic
Pre Footer With Text
Requires JavaScript
Stats 3
Call To Action 2
Component from
Soft UI Design System
Builder
<div class="py-5 draggable">
<div class="container">
<div class="row">
<div class="col-lg-6 text-start">
<h4>Get tips & tricks every week</h4>
<p class="mb-0">The latest news, articles and resources sent to your inbox weekely.</p>
</div>
<div class="col-lg-5 ms-auto text-end mt-4 mt-lg-0">
<div class="row">
<div class="col-lg-8 col-md-4 col-7">
<div class="form-group mb-0">
<div class="input-group">
<div class="input-group">
<span class="input-group-text"><i class="ni ni-email-83"></i></span>
<input class="form-control" placeholder="Your Email" type="email" >
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-5 text-start">
<button type="button" class="btn bg-gradient-primary mb-0 h-100">Subscribe</button>
</div>
</div>
</div>
</div>
</div>
</div>