Soft UI Design System Components

Discover 26 components available in Soft UI Design System

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>

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>

Header 13

Header 4

Header 6

Header 3

Header 12

Header 5

Header 7

Header With Forms