Soft UI Dashboard Components

Discover 6 components available in Soft UI Dashboard

Card Illustration

Component from Soft UI Dashboard Builder
<div class="card draggable">
  <div class="card-body p-3">
    <div class="row">
      <div class="col-lg-6">
        <div class="d-flex flex-column h-100">
          <p class="mb-1 pt-2 text-bold">Built by developers</p>
          <h5 class="font-weight-bolder">Soft UI Dashboard</h5>
          <p class="mb-5">From colors, cards, typography to complex elements, you will find the full documentation.</p>
          <a class="text-body text-sm font-weight-bold mb-0 icon-move-right mt-auto" href="javascript:;">
            Read More
            <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
          </a>
        </div>
      </div>
      <div class="col-lg-5 ms-auto text-center mt-5 mt-lg-0">
        <div class="bg-gradient-primary border-radius-lg h-100">
          <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/shapes/waves-white.svg" class="position-absolute h-100 w-50 top-0 d-lg-block d-none" alt="waves">
          <div class="position-relative d-flex align-items-center justify-content-center h-100">
            <img class="w-100 position-relative z-index-2 pt-4" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/illustrations/rocket-white.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Card Image

Component from Soft UI Dashboard Builder
<div class="card h-100 p-3 draggable">
    <div class="overflow-hidden position-relative border-radius-lg bg-cover h-100" style="background-image: url(https://demos.creative-tim.com/soft-ui-dashboard/assets/img/ivancik.jpg);">
        <span class="mask bg-gradient-dark"></span>
        <div class="card-body position-relative z-index-1 d-flex flex-column h-100 p-3">
        <h5 class="text-white font-weight-bolder mb-4 pt-2">Work with the rockets</h5>
        <p class="text-white">Wealth creation is an evolutionarily recent positive-sum game. It is all about who take the opportunity first.</p>
        <a class="text-white text-sm font-weight-bold mb-0 icon-move-right mt-auto" href="javascript:;">
            Read More
            <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
        </a>
        </div>
    </div>
</div>

Card Profile

Component from Soft UI Dashboard Builder

Card Project User

Component from Soft UI Dashboard Builder

Card Song

Component from Soft UI Dashboard Builder

Card Payment

Component from Soft UI Dashboard Builder