Soft UI Design System Components
Discover 131 components available in Soft UI Design System
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>Teams 1
Component from
Soft UI Design System
Builder
<section class="py-5 draggable">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto text-center">
<h4 class="text-gradient text-primary">Join our awesome team</h4>
</div>
</div>
<div class="row mt-lg-5 mt-4">
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card card-body">
<div class="row">
<div class="col-lg-7">
<h5 class="mb-2">Michael Frisen</h5>
<span class="badge badge-sm rounded-pill mb-3 text-dark">PHP Developer</span>
<br/>
<button type="button" class="btn btn-twitter btn-simple px-2 mb-0">
<i class="fab fa-twitter text-lg"></i>
</button>
<button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
<i class="fab fa-dribbble text-lg"></i>
</button>
<button type="button" class="btn btn-slack btn-simple px-2 mb-0">
<i class="fab fa-slack text-lg"></i>
</button>
</div>
<div class="col-lg-5 text-end my-auto">
<img class="avatar avatar-xxl" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-2.jpg">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card card-body">
<div class="row">
<div class="col-lg-7">
<h5 class="mb-2">Laurent Shaun</h5>
<span class="badge badge-sm rounded-pill mb-3 text-dark">Laravel Senior</span>
<br/>
<button type="button" class="btn btn-facebook btn-simple px-2 mb-0">
<i class="fab fa-facebook-f text-lg"></i>
</button>
<button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
<i class="fab fa-dribbble text-lg"></i>
</button>
<button type="button" class="btn btn-slack btn-simple px-2 mb-0">
<i class="fab fa-slack text-lg"></i>
</button>
</div>
<div class="col-lg-5 text-end my-auto">
<img class="avatar avatar-xxl" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-3.jpg">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div class="card card-body">
<div class="row">
<div class="col-lg-7">
<h5 class="mb-2">Ramon Siente</h5>
<span class="badge badge-sm rounded-pill mb-3 text-dark">Vue.js Specialist</span>
<br/>
<button type="button" class="btn btn-twitter btn-simple px-2 mb-0">
<i class="fab fa-twitter text-lg"></i>
</button>
<button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
<i class="fab fa-dribbble text-lg"></i>
</button>
<button type="button" class="btn btn-github btn-simple px-2 mb-0">
<i class="fab fa-github text-lg"></i>
</button>
</div>
<div class="col-lg-5 text-end my-auto">
<img class="avatar avatar-xxl" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-2.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</section>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>
Requires JavaScript
Pricing 1
Component from
Soft UI Design System
Builder
<section class="py-4 bg-gray-100 draggable"> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-8 mx-auto mb-4 text-center"> <h3>Pick the best plan for you</h3> <p>You have Free Unlimited Updates and Premium Support on each package.</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="card card-pricing"> <div class="card-header bg-gradient-dark text-center pt-4 pb-5 position-relative"> <div class="z-index-1 position-relative"> <h5 class="text-white">Freelancer</h5> <h1 class="text-white mt-2 mb-0"> <small>$</small><span>199</span></h1> <h6 class="text-white">per year</h6> </div> </div> <div class="position-relative mt-n5" style="height: 50px;"> <div class="position-absolute w-100"> <svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path> </defs> <g class="moving-waves"> <use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use> <use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use> <use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use> <use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use> <use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use> <use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use> </g> </svg> </div> </div> <div class="card-body text-center"> <ul class="list-unstyled max-width-200 mx-auto"> <li> <b>10</b> Projects <hr class="horizontal dark"> </li> <li> <b>1</b> Team Members <hr class="horizontal dark"> </li> <li> <b>5</b> Personal Contacts <hr class="horizontal dark"> </li> <li> <b>500</b> Messages </li> </ul> <a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0"> Get started </a> </div> </div> </div> <div class="col-lg-4 col-md-6 mt-5 mt-sm-0 "> <div class="card card-pricing"> <div class="card-header text-center pt-4 pb-5 position-relative" style="background-image: url('https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/curved-images/curved6-small.jpg');background-size: cover;"> <span class="mask bg-gradient-dark opacity-4 border-radius-lg"></span> <div class="z-index-1 position-relative"> <h5 class="text-white">Startup</h5> <h1 class="text-white mt-2 mb-0"> <small>$</small><span>349</span></h1> <h6 class="text-white">per year</h6> </div> </div> <div class="position-relative mt-n5" style="height: 50px;"> <div class="position-absolute w-100"> <svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path> </defs> <g class="moving-waves"> <use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use> <use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use> <use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use> <use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use> <use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use> <use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use> </g> </svg> </div> </div> <div class="card-body text-center"> <ul class="list-unstyled max-width-200 mx-auto"> <li> <b>10</b> Projects <hr class="horizontal dark"> </li> <li> <b>1</b> Team Members <hr class="horizontal dark"> </li> <li> <b>5</b> Personal Contacts <hr class="horizontal dark"> </li> <li> <b>500</b> Messages </li> </ul> <a href="javascript:;" class="btn bg-gradient-primary w-100 mt-4 mb-0"> Get started </a> </div> </div> </div> <div class="col-lg-4 col-md-6 mt-5 mt-lg-0 mx-md-auto"> <div class="card card-pricing"> <div class="card-header bg-gradient-dark text-center pt-4 pb-5 position-relative"> <div class="z-index-1 position-relative"> <h5 class="text-white">Company</h5> <h1 class="text-white mt-2 mb-0"> <small>$</small><span>779</span></h1> <h6 class="text-white">per year</h6> </div> </div> <div class="position-relative mt-n5" style="height: 50px;"> <div class="position-absolute w-100"> <svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto"> <defs> <path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path> </defs> <g class="moving-waves"> <use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use> <use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use> <use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use> <use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use> <use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use> <use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use> </g> </svg> </div> </div> <div class="card-body text-center"> <ul class="list-unstyled max-width-200 mx-auto"> <li> <b>10</b> Projects <hr class="horizontal dark"> </li> <li> <b>1</b> Team Members <hr class="horizontal dark"> </li> <li> <b>5</b> Personal Contacts <hr class="horizontal dark"> </li> <li> <b>500</b> Messages </li> </ul> <a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0"> Get started </a> </div> </div> </div> </div> </div> </section>
<script>
var total = document.querySelectorAll('.nav-pills'); total.forEach(function(item, i){ var moving_div = document.createElement('div'); var first_li = item.querySelector('li .nav-link.active'); var tab = first_li.cloneNode(); tab.innerHTML = "-"; moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link'); moving_div.appendChild(tab); item.appendChild(moving_div); var list_length = item.getElementsByTagName("li").length; let nodes = Array.from( first_li.closest('ul').children ) let index = nodes.indexOf( first_li.closest('li') )+1; let sum = 0; moving_div.style.padding = '0px'; moving_div.style.width = item.querySelector('li .nav-link.active').offsetWidth+'px'; if(item.classList.contains('flex-column')){ for(var j = 1; j<index; j++){ sum += item.querySelector('li:nth-child('+j+')').offsetHeight; } moving_div.style.transform = 'translate3d(0px,'+sum+'px, 0px)'; } else { for(var j = 1; j<index; j++){ sum += item.querySelector('li:nth-child('+j+')').offsetWidth; } moving_div.style.transform = 'translate3d('+sum+'px, 0px, 0px)'; } moving_div.style.transition = '.5s ease'; item.onmouseover = function(event) { let target = getEventTarget(event); let li = target.closest('li'); // get reference if(li){ let nodes = Array.from( li.closest('ul').children ); // get array let index = nodes.indexOf( li )+1; item.querySelector('li:nth-child('+index+') .nav-link').onclick = function(){ moving_div = item.querySelector('.moving-tab'); let sum = 0; if(item.classList.contains('flex-column')){ for(var j = 1; j<=nodes.indexOf( li ); j++){ sum += item.querySelector('li:nth-child('+j+')').offsetHeight; } moving_div.style.transform = 'translate3d(0px,'+sum+'px, 0px)'; moving_div.style.height = item.querySelector('li:nth-child('+j+')').offsetHeight; } else { for(var j = 1; j<=nodes.indexOf( li ); j++){ sum += item.querySelector('li:nth-child('+j+')').offsetWidth; } moving_div.style.transform = 'translate3d('+sum+'px, 0px, 0px)'; moving_div.style.width = item.querySelector('li:nth-child('+index+')').offsetWidth+'px'; } } } } });
</script>
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>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>
