Soft UI Design System Components
Discover 131 components available in Soft UI Design System
Call To Action 1
Component from
Soft UI Design System
Builder
<div class="py-5 draggable">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h4 class="mb-1">Thank you for your support!</h4>
<p class="lead mb-0">Delivering the best products</p>
</div>
<div class="col-lg-6 d-flex align-items-center">
<a href="javascript:;" class="btn btn-twitter mb-0 me-2">
<i class="fab fa-twitter me-1"></i> Twitter
</a>
<a href="javascript:;" class="btn btn-facebook mb-0 me-2">
<i class="fab fa-facebook-square me-1"></i> Facebook
</a>
<a href="javascript:;" class="btn btn-tumblr mb-0 me-2">
<i class="fab fa-tumblr me-1"></i> Tumblr
</a>
<a href="javascript:;" class="btn btn-dribbble mb-0">
<i class="fab fa-dribbble me-1"></i> Dribbble
</a>
</div>
</div>
</div>
</div>Logo Areas 1
Component from
Soft UI Design System
Builder
<div class="py-5 draggable">
<div class="container">
<div class="row">
<div class="col-8 mx-auto text-center">
<h6 class="opacity-5"> More than 50+ brands trust Soft</h6>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-2 col-md-4 col-6 mb-4">
<img class="w-100 opacity-9" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-coinbase.svg" alt="logo">
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4">
<img class="w-100 opacity-9" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-nasa.svg" alt="logo">
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4">
<img class="w-100 opacity-9" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-netflix.svg" alt="logo">
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4">
<img class="w-100 opacity-9" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-pinterest.svg" alt="logo">
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4">
<img class="w-100 opacity-9" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-spotify.svg" alt="logo">
</div>
<div class="col-lg-2 col-md-4 col-6 mb-4">
<img class="w-100 opacity-9" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-vodafone.svg" alt="logo">
</div>
</div>
</div>
</div>Testimmonial 1
Component from
Soft UI Design System
Builder
<section class="py-5 draggable">
<div class="container">
<div class="row">
<div class="col-lg-6 mx-auto text-center">
<h2 class="text-gradient text-primary mb-0">What random people</h2>
<h2 class="mb-3">Think about us</h2>
<p>That’s the main thing people are controlled by! Thoughts- their perception of themselves! </p>
</div>
</div>
<div class="row mt-6">
<div class="col-lg-4 col-md-8">
<div class="card card-plain">
<div class="card-body">
<div class="author">
<img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-3.jpg" alt="..." class="avatar shadow">
<div class="name ps-2">
<span>Mathew Glock</span>
<div class="stats">
<small><i class="far fa-clock"></i> 5 min read</small>
</div>
</div>
</div>
<p class="mt-4">"If you have the opportunity to play this game of life you need to appreciate every moment."</p>
<div class="rating mt-3">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8 ms-md-auto">
<div class="card bg-gradient-primary">
<div class="card-body">
<div class="author align-items-center">
<img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/marie.jpg" alt="..." class="avatar shadow">
<div class="name ps-2">
<span class="text-white">Mathew Glock</span>
<div class="stats">
<small class="text-white">Posted on 28 February</small>
</div>
</div>
</div>
<p class="mt-4 text-white">"If you have the opportunity to play this game of life you need to appreciate every moment."</p>
<div class="rating mt-3">
<i class="fas fa-star text-white"></i>
<i class="fas fa-star text-white"></i>
<i class="fas fa-star text-white"></i>
<i class="far fa-star text-white"></i>
<i class="far fa-star text-white"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-8">
<div class="card card-plain">
<div class="card-body">
<div class="author">
<img src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-2.jpg" alt="..." class="avatar shadow">
<div class="name ps-2">
<span>Mathew Glock</span>
<div class="stats">
<small><i class="far fa-clock"></i> 5 min read</small>
</div>
</div>
</div>
<p class="mt-4">"If you have the opportunity to play this game of life you need to appreciate every moment."</p>
<div class="rating mt-3">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-5">
<div class="row">
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-apple.svg" alt="Logo">
</div>
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-facebook.svg" alt="Logo">
</div>
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-behance.svg" alt="Logo">
</div>
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-spotify.svg" alt="Logo">
</div>
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-coinbase.svg" alt="Logo">
</div>
<div class="col-lg-2 col-6">
<img class="w-100 opacity-6" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/logos/gray-logos/logo-pinterest.svg" alt="Logo">
</div>
</div>
</div>
</section>Stats 1
Component from
Soft UI Design System
Builder
<section class="py-5 draggable">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-md-3">
<h1 class="text-gradient text-primary">323</h1>
<h5 class="mt-3">Projects</h5>
<p>Of “high-performing” level are led by a certified project manager</p>
</div>
<div class="col-md-3">
<h1 class="text-gradient text-primary">500+</h1>
<h5 class="mt-3">Hours</h5>
<p>That meets quality standards required by our users</p>
</div>
<div class="col-md-3">
<h1 class="text-gradient text-primary">24/7</h1>
<h5 class="mt-3">Support</h5>
<p>Actively engage team members that finishes on time</p>
</div>
</div>
</div>
</section>Header 1
Component from
Soft UI Design System
Builder
<header class="draggable">
<div class="page-header min-vh-75">
<div class="oblique position-absolute top-0 h-100 d-md-block d-none">
<div class="oblique-image bg-cover position-absolute fixed-top ms-auto h-100 z-index-0 ms-n8" style="background-image:url(https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/curved-images/curved11.jpg)"></div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 d-flex justify-content-center flex-column">
<h1 class="text-gradient text-primary">Your Work With</h1>
<h1 class="mb-4">Soft Design System</h1>
<p class="lead pe-5 me-5">The time is now for it be okay to be great. People in this world shun people for being nice. </p>
<div class="buttons">
<button type="button" class="btn bg-gradient-primary mt-4">Get Started</button>
<button type="button" class="btn text-primary shadow-none mt-4">Read more</button>
</div>
</div>
</div>
</div>
</div>
</header>Faq
Component from
Soft UI Design System
Builder
<section class="py-4 draggable">
<div class="container">
<div class="row my-5">
<div class="col-md-6 mx-auto text-center">
<h2>Frequently Asked Questions</h2>
<p>A lot of people don't appreciate the moment until it’s passed. I'm not trying my hardest, and I'm not trying to do </p>
</div>
</div>
<div class="row">
<div class="col-md-10 mx-auto">
<div class="accordion" id="accordionRental">
<div class="accordion-item mb-3">
<h5 class="accordion-header" id="headingOne">
<button class="accordion-button border-bottom font-weight-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
How do I order?
<i class="collapse-close fa fa-plus text-xs pt-1 position-absolute end-0 me-3"></i>
<i class="collapse-open fa fa-minus text-xs pt-1 position-absolute end-0 me-3"></i>
</button>
</h5>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionRental">
<div class="accordion-body text-sm opacity-8">
We’re not always in the position that we want to be at. We’re constantly growing. We’re constantly making mistakes. We’re constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game
of life you need to appreciate every moment. A lot of people don’t appreciate the moment until it’s passed.
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h5 class="accordion-header" id="headingTwo">
<button class="accordion-button border-bottom font-weight-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
How can i make the payment?
<i class="collapse-close fa fa-plus text-xs pt-1 position-absolute end-0 me-3"></i>
<i class="collapse-open fa fa-minus text-xs pt-1 position-absolute end-0 me-3"></i>
</button>
</h5>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionRental">
<div class="accordion-body text-sm opacity-8">
It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn’t matter. Because it's about motivating the doers. Because I’m here to follow my dreams and inspire other people to follow their dreams, too.
<br>
We’re not always in the position that we want to be at. We’re constantly growing. We’re constantly making mistakes. We’re constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don’t appreciate the moment until it’s passed.
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h5 class="accordion-header" id="headingThree">
<button class="accordion-button border-bottom font-weight-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
How much time does it take to receive the order?
<i class="collapse-close fa fa-plus text-xs pt-1 position-absolute end-0 me-3"></i>
<i class="collapse-open fa fa-minus text-xs pt-1 position-absolute end-0 me-3"></i>
</button>
</h5>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionRental">
<div class="accordion-body text-sm opacity-8">
The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out. But the time is now to be okay to be the greatest you. Would you believe in what you believe in, if you were the only one who believed it?
If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration. People are so scared to lose that they don't even try. Like, one thing people can't say is that I'm not trying, and I'm not trying my hardest, and I'm not trying to do the best way I know how.
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h5 class="accordion-header" id="headingFour">
<button class="accordion-button border-bottom font-weight-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Can I resell the products?
<i class="collapse-close fa fa-plus text-xs pt-1 position-absolute end-0 me-3"></i>
<i class="collapse-open fa fa-minus text-xs pt-1 position-absolute end-0 me-3"></i>
</button>
</h5>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionRental">
<div class="accordion-body text-sm opacity-8">
I always felt like I could do anything. That’s the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can’t do anything, you won’t do anything. I was taught I could do everything.
<br><br>
If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration. People are so scared to lose that they don't even try. Like, one thing people can't say is that I'm not trying, and I'm not trying my hardest, and I'm not trying to do the best way I know how.
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h5 class="accordion-header" id="headingFifth">
<button class="accordion-button border-bottom font-weight-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFifth" aria-expanded="false" aria-controls="collapseFifth">
Where do I find the shipping details?
<i class="collapse-close fa fa-plus text-xs pt-1 position-absolute end-0 me-3"></i>
<i class="collapse-open fa fa-minus text-xs pt-1 position-absolute end-0 me-3"></i>
</button>
</h5>
<div id="collapseFifth" class="accordion-collapse collapse" aria-labelledby="headingFifth" data-bs-parent="#accordionRental">
<div class="accordion-body text-sm opacity-8">
There’s nothing I really wanted to do in life that I wasn’t able to get good at. That’s my skill. I’m not really specifically talented at anything except for the ability to learn. That’s what I do. That’s what I’m here for. Don’t be afraid to be wrong because you can’t learn anything from a compliment.
I always felt like I could do anything. That’s the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can’t do anything, you won’t do anything. I was taught I could do everything.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Navbar Dark
Component from
Soft UI Design System
Builder
<nav class="navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3 draggable">
<div class="container">
<a class="navbar-brand font-weight-bold text-white" href="javascript:;" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom">
Soft UI PRO
</a>
<a href="javascript:;" class="btn btn-sm bg-gradient-info btn-round mb-0 ms-auto d-lg-none d-block">Buy Now</a>
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon mt-2">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</span>
</button>
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
<ul class="navbar-nav navbar-nav-hover mx-auto">
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" href="">
Our Story
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" href="">
Solutions
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" href="">
About Us
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" href="">
Contact
</a>
</li>
</ul>
<ul class="navbar-nav d-lg-block d-none">
<li class="nav-item">
<a href="javascript:;" class="btn btn-sm bg-gradient-info btn-round mb-0 me-1">Buy Now</a>
</li>
</ul>
</div>
</div>
</nav>Header 2
Component from
Soft UI Design System
Builder
<header class="draggable mt-4">
<div class="page-header min-vh-75">
<div class="container">
<div class="row">
<div class="col-lg-4 my-auto">
<h1 class="text-gradient text-warning mb-0">Your Desired</h1>
<h1 class="mb-4">Experiences</h1>
<p class="lead">The time is now for it to be okay to be great. For being a bright color. For standing out.</p>
<div class="buttons">
<button type="button" class="btn bg-gradient-warning mt-4">Discover</button>
<button type="button" class="btn text-warning shadow-none mt-4">Read more</button>
</div>
</div>
<div class="col-lg-8 ps-5 pe-0">
<div class="row">
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-0 mt-lg-7" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/desire.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/chair.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/facade.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-0 mt-lg-5" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/architecture.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/baloon.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-3" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/seaside.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/medusa.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</header>Blogs 1
Component from
Soft UI Design System
Builder
<section class="py-3 draggable">
<div class="container">
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="p-3 text-center mb-5">
<div class="icon icon-shape icon-lg bg-gradient-primary shadow mx-auto">
<i class="fas fa-user"></i>
</div>
<h2 class="mt-3">Check out what's new</h2>
<p>We get insulted by others, lose trust for those others. We get back freezes every winter</p>
</div>
</div>
</div>
<div class="row mb-5">
<div class="col-lg-4 col-md-6">
<div class="card card-background align-items-start h-100">
<div class="full-background" style="background-image: url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/beach.jpg)"></div>
<div class="card-body z-index-3">
<div class="icon icon-md">
<svg width="30px" height="30px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>spaceship</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(4.000000, 301.000000)">
<path d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
<path d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
<path d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
<path d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" id="color-3" opacity="0.598539807"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="card-footer pb-3 pt-2 z-index-3">
<h4 class="text-white mb-1">Nature's Light</h4>
<p class="text-white text-xs font-weight-bolder text-uppercase opacity-7">450 spots</p>
</div>
<span class="mask bg-gradient-primary border-radius-xl z-index-2 opacity-6"></span>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex flex-column">
<div class="card h-100 card-background align-items-start">
<div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/indian.jpg')"></div>
<div class="card-body z-index-3">
<div class="icon icon-md">
<svg width="30px" height="30px" viewBox="0 0 44 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>megaphone</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2168.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="megaphone" transform="translate(452.000000, 300.000000)">
<path d="M35.7958333,0.273166667 C35.2558424,-0.0603712374 34.5817509,-0.0908856664 34.0138333,0.1925 L19.734,7.33333333 L9.16666667,7.33333333 C4.10405646,7.33333333 0,11.4373898 0,16.5 C0,21.5626102 4.10405646,25.6666667 9.16666667,25.6666667 L19.734,25.6666667 L34.0138333,32.8166667 C34.5837412,33.1014624 35.2606401,33.0699651 35.8016385,32.7334768 C36.3426368,32.3969885 36.6701539,31.8037627 36.6666942,31.1666667 L36.6666942,1.83333333 C36.6666942,1.19744715 36.3370375,0.607006911 35.7958333,0.273166667 Z"></path>
<path d="M38.5,11 L38.5,22 C41.5375661,22 44,19.5375661 44,16.5 C44,13.4624339 41.5375661,11 38.5,11 Z" opacity="0.601050967"></path>
<path d="M18.5936667,29.3333333 L10.6571667,29.3333333 L14.9361667,39.864 C15.7423448,41.6604248 17.8234451,42.4993948 19.6501416,41.764381 C21.4768381,41.0293672 22.3968823,38.982817 21.7341667,37.1286667 L18.5936667,29.3333333 Z" opacity="0.601050967"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="card-footer pb-3 pt-2 z-index-3">
<h4 class="text-white mb-1">Cultural</h4>
<p class="text-white text-xs font-weight-bolder text-uppercase opacity-7">257 spots</p>
</div>
<span class="mask bg-gradient-info border-radius-xl z-index-2 opacity-6"></span>
</div>
<div class="card h-100 card-background mt-4 align-items-start">
<div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/greece.jpg')"></div>
<div class="card-body z-index-3">
<div class="icon icon-md">
<svg width="30px" height="30px" viewBox="0 0 46 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>customer-support</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1717.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(1.000000, 0.000000)">
<path d="M45,0 L26,0 C25.447,0 25,0.447 25,1 L25,20 C25,20.379 25.214,20.725 25.553,20.895 C25.694,20.965 25.848,21 26,21 C26.212,21 26.424,20.933 26.6,20.8 L34.333,15 L45,15 C45.553,15 46,14.553 46,14 L46,1 C46,0.447 45.553,0 45,0 Z" opacity="0.59858631"></path>
<path d="M22.883,32.86 C20.761,32.012 17.324,31 13,31 C8.676,31 5.239,32.012 3.116,32.86 C1.224,33.619 0,35.438 0,37.494 L0,41 C0,41.553 0.447,42 1,42 L25,42 C25.553,42 26,41.553 26,41 L26,37.494 C26,35.438 24.776,33.619 22.883,32.86 Z"></path>
<path d="M13,28 C17.432,28 21,22.529 21,18 C21,13.589 17.411,10 13,10 C8.589,10 5,13.589 5,18 C5,22.529 8.568,28 13,28 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="card-footer pb-3 pt-2 z-index-3">
<h4 class="text-white mb-1">Popularity</h4>
<p class="text-white text-xs font-weight-bolder text-uppercase opacity-7">363 spots</p>
</div>
<span class="mask bg-gradient-primary border-radius-xl z-index-2 opacity-6"></span>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex flex-column">
<div class="card card-background align-items-start">
<div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/city.jpg')"></div>
<div class="card-body z-index-3">
<div class="icon icon-md">
<svg width="30px" height="30px" viewBox="0 0 52 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>sound-wave</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2015.000000, -596.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="sound-wave" transform="translate(299.000000, 305.000000)">
<path d="M15.2941176,30.5882353 C14.6024837,30.5882353 13.9754248,30.1667974 13.7154248,29.5210458 L8.11777778,15.5269281 L6.51189542,17.9366013 C6.19581699,18.4090196 5.66562092,18.6928105 5.09803922,18.6928105 L0,18.6928105 L0,15.2941176 L4.18888889,15.2941176 L7.08287582,10.9522876 C7.43294118,10.4288889 8.03281046,10.1467974 8.67346405,10.2045752 C9.30052288,10.2708497 9.84261438,10.6769935 10.0754248,11.263268 L15.0969935,23.8214379 L22.1696732,1.19294118 C22.3905882,0.482614379 23.0465359,0 23.7908497,0 C23.792549,0 23.792549,0 23.7942484,0 C24.5385621,0.00169934641 25.1962092,0.487712418 25.4154248,1.19973856 L31.2305882,20.1015686 L34.3267974,15.9738562 C34.6462745,15.5456209 35.1509804,15.2941176 35.6862745,15.2941176 L40.7843137,15.2941176 L40.7843137,18.6928105 L36.5359477,18.6928105 L31.9477124,24.8104575 C31.5653595,25.3202614 30.9298039,25.5717647 30.2959477,25.4647059 C29.6671895,25.3542484 29.1522876,24.9005229 28.9636601,24.2904575 L23.7772549,7.43803922 L16.9152941,29.3952941 C16.7011765,30.0818301 16.0792157,30.5593464 15.3603922,30.5865359 C15.3366013,30.5882353 15.3162092,30.5882353 15.2941176,30.5882353 Z"></path>
<path d="M26.5098039,34.6666667 C25.8181699,34.6666667 25.1911111,34.2452288 24.9311111,33.5994771 L19.3334641,19.6053595 L17.7275817,22.0150327 C17.4115033,22.487451 16.8813072,22.7712418 16.3137255,22.7712418 L11.2156863,22.7712418 L11.2156863,19.372549 L15.4045752,19.372549 L18.2985621,15.030719 C18.6486275,14.5073203 19.2484967,14.2252288 19.8891503,14.2830065 C20.5162092,14.349281 21.0583007,14.7554248 21.2911111,15.3416993 L26.3126797,27.8998693 L33.3853595,5.27137255 C33.6062745,4.56104575 34.2622222,4.07843137 35.0065359,4.07843137 C35.0082353,4.07843137 35.0082353,4.07843137 35.0099346,4.07843137 C35.7542484,4.08013072 36.4118954,4.56614379 36.6311111,5.27816993 L42.4462745,24.18 L45.5424837,20.0522876 C45.8619608,19.6240523 46.3666667,19.372549 46.9019608,19.372549 L52,19.372549 L52,22.7712418 L47.751634,22.7712418 L43.1633987,28.8888889 C42.7810458,29.3986928 42.1454902,29.6501961 41.511634,29.5431373 C40.8828758,29.4326797 40.3679739,28.9789542 40.1793464,28.3688889 L34.9929412,11.5164706 L28.1309804,33.4737255 C27.9168627,34.1602614 27.294902,34.6377778 26.5760784,34.6649673 C26.5522876,34.6666667 26.5318954,34.6666667 26.5098039,34.6666667 Z" id="Path-Copy" opacity="0.604957217"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="card-footer pb-3 pt-5 z-index-3">
<h4 class="text-white mb-1">Modern Life</h4>
<p class="text-white text-xs font-weight-bolder text-uppercase opacity-7">117 spots</p>
</div>
<span class="mask bg-gradient-info border-radius-xl z-index-2 opacity-6"></span>
</div>
<div class="card card-background mt-4 align-items-start">
<div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/laught.jpg')"></div>
<div class="card-body z-index-3">
<div class="icon icon-md">
<svg width="30px" height="30px" viewBox="0 0 42 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>time-alarm</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2319.000000, -440.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="time-alarm" transform="translate(603.000000, 149.000000)">
<path d="M18.8086957,4.70034783 C15.3814926,0.343541521 9.0713063,-0.410050841 4.7145,3.01715217 C0.357693695,6.44435519 -0.395898667,12.7545415 3.03130435,17.1113478 C5.53738466,10.3360568 11.6337901,5.54042955 18.8086957,4.70034783 L18.8086957,4.70034783 Z" opacity="0.6"></path>
<path d="M38.9686957,17.1113478 C42.3958987,12.7545415 41.6423063,6.44435519 37.2855,3.01715217 C32.9286937,-0.410050841 26.6185074,0.343541521 23.1913043,4.70034783 C30.3662099,5.54042955 36.4626153,10.3360568 38.9686957,17.1113478 Z" opacity="0.6"></path>
<path d="M34.3815652,34.7668696 C40.2057958,27.7073059 39.5440671,17.3375603 32.869743,11.0755718 C26.1954189,4.81358341 15.8045811,4.81358341 9.13025701,11.0755718 C2.45593289,17.3375603 1.79420418,27.7073059 7.61843478,34.7668696 L3.9753913,40.0506522 C3.58549114,40.5871271 3.51710058,41.2928217 3.79673036,41.8941824 C4.07636014,42.4955431 4.66004722,42.8980248 5.32153275,42.9456105 C5.98301828,42.9931963 6.61830436,42.6784048 6.98113043,42.1232609 L10.2744783,37.3434783 C16.5555112,42.3298213 25.4444888,42.3298213 31.7255217,37.3434783 L35.0188696,42.1196087 C35.6014207,42.9211577 36.7169135,43.1118605 37.53266,42.5493622 C38.3484064,41.9868639 38.5667083,40.8764423 38.0246087,40.047 L34.3815652,34.7668696 Z M30.1304348,25.5652174 L21,25.5652174 C20.49574,25.5652174 20.0869565,25.1564339 20.0869565,24.6521739 L20.0869565,15.5217391 C20.0869565,15.0174791 20.49574,14.6086957 21,14.6086957 C21.50426,14.6086957 21.9130435,15.0174791 21.9130435,15.5217391 L21.9130435,23.7391304 L30.1304348,23.7391304 C30.6346948,23.7391304 31.0434783,24.1479139 31.0434783,24.6521739 C31.0434783,25.1564339 30.6346948,25.5652174 30.1304348,25.5652174 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="card-footer pb-3 pt-2 z-index-3">
<h4 class="text-white mb-1">Good Vibes</h4>
<p class="text-white text-xs font-weight-bolder text-uppercase opacity-7">215 spots</p>
</div>
<span class="mask bg-gradient-primary border-radius-xl z-index-2 opacity-6"></span>
</div>
</div>
</div>
</div>
</section>Footer 1
Component from
Soft UI Design System
Builder
<footer class="footer py-5 draggable">
<div class="container">
<div class="row">
<div class="col-lg-3 mb-5 mb-lg-0">
<h6 class="text-uppercase mb-2">Soft</h6>
<p class="mb-4 pb-2">
The next generation of design systems.
</p>
<a href="javascript:;" class="text-secondary me-xl-4 me-3">
<span class="text-lg fab fa-facebook"></span>
</a>
<a href="javascript:;" class="text-secondary me-xl-4 me-3">
<span class="text-lg fab fa-twitter"></span>
</a>
<a href="javascript:;" class="text-secondary me-xl-4 me-3">
<span class="text-lg fab fa-instagram"></span>
</a>
<a href="javascript:;" class="text-secondary me-xl-4 me-3">
<span class="text-lg fab fa-pinterest"></span>
</a>
<a href="javascript:;" class="text-secondary me-xl-4 me-3">
<span class="text-lg fab fa-github"></span>
</a>
</div>
<div class="col-md-2 col-6 ms-lg-auto mb-md-0 mb-4">
<h6 class="text-sm">Company</h6>
<ul class="flex-column ms-n3 nav">
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:void(0);">
About Us
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Careers
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Press
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Blog
</a>
</li>
</ul>
</div>
<div class="col-md-2 col-6 mb-md-0 mb-4">
<h6 class="text-sm">Pages</h6>
<ul class="flex-column ms-n3 nav">
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Login
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Register
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Add list
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Contact
</a>
</li>
</ul>
</div>
<div class="col-md-2 col-6 mb-md-0 mb-4">
<h6 class="text-sm">Legal</h6>
<ul class="flex-column ms-n3 nav">
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Terms
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
About Us
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Team
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Privacy
</a>
</li>
</ul>
</div>
<div class="col-md-2 col-6 mb-md-0 mb-4">
<h6 class="text-sm">Resources</h6>
<ul class="flex-column ms-n3 nav">
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Blog
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Service
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Product
</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="javascript:;">
Pricing
</a>
</li>
</ul>
</div>
</div>
<hr class="horizontal dark mt-lg-5 mt-4 mb-sm-4 mb-1">
<div class="row">
<div class="col-8 mx-lg-auto text-lg-center">
<p class="text-sm text-secondary">
Copyright © 2022 Soft & Loopple by Creative Tim.
</p>
</div>
</div>
</div>
</footer>