Soft UI Design System Components

Discover 9 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>

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>

Call To Action 4

Pre Footer With Text

Call To Action 6

Call To Action 5

Pre Footer With Text And Button

Call To Action With Image On Left

Call To Action 3