Bootstrap Cards - Asteria Dashboard

Discover 10 Bootstrap Cards available in Asteria Dashboard

Card Carousel

Component from Asteria Dashboard Builder
<div class="card min-height-300 h-100 draggable">
    <div class="overflow-hidden position-relative border-radius-lg min-height-300 h-100">
      <div class="card-body position-relative z-index-1 d-flex flex-column min-height-300 h-100 p-0">
        <div id="carouselImageSlide" class="carousel slide min-height-300 h-100" data-bs-ride="carousel">
          <div class="carousel-inner min-height-300 h-100">
            <div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1514894780887-121968d00567?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1746&amp;q=80');">
              <span class="mask bg-gradient-dark"></span>
              <div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
                <h5 class="text-white font-weight-bolder mb-2 pt-2">Go slow until you win</h5>
                <p class="text-white text-sm mb-0">Remote work starts with eliminating commutes and cubicles.</p>
              </div>
            </div>
            <div class="carousel-item min-height-300 h-100 bg-cover active" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1489710437720-ebb67ec84dd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1740&amp;q=80');">
              <span class="mask bg-gradient-dark"></span>
              <div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
                <h5 class="text-white font-weight-bolder mb-2 pt-2">Work with the rockets</h5>
                <p class="text-white text-sm mb-0">Wealth creation is an evolutionarily recent positive-sum game.</p>
              </div>
            </div>
            <div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1511497584788-876760111969?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2064&amp;q=80');">
              <span class="mask bg-gradient-dark"></span>
              <div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
                <h5 class="text-white font-weight-bolder mb-2 pt-2">Books don’t need an audience.</h5>
                <p class="text-white text-sm mb-0">Set and enforce an aspirational hourly rate.</p>
              </div>
            </div>
          </div>
          <button class="carousel-control-prev ms-auto end-8 w-5" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="prev">
            <span class="carousel-control-prev-icon position-absolute top-4 right-10" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next w-5 end-3" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="next">
            <span class="carousel-control-next-icon position-absolute top-4 right-10 text-sm" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </div>
  </div>

Card Stat

Component from Asteria Dashboard Builder
<div class="card mb-4 draggable">
    <div class="card-body p-3">
        <div class="row">
        <div class="col-8">
            <div class="numbers">
            <p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Today's Money</p>
            <div class="d-flex align-items-center my-2">
                <span class="badge bg-success-soft text-xxs">
                <i class="fas fa-angle-up text-success" aria-hidden="true"></i>
                </span>
                <span class="text-xs font-weight-bolder ms-1">+55%</span>
            </div>
            <h4 class="font-weight-bolder mb-0">
                $53,000
            </h4>
            </div>
        </div>
        <div class="col-4 text-end">
            <div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
            <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
            </div>
        </div>
        </div>
    </div>
</div>

Card Stat Bg

Component from Asteria Dashboard Builder

Card Background

Component from Asteria Dashboard Builder

Card Nft

Component from Asteria Dashboard Builder

Card Blog Simple

Component from Asteria Dashboard Builder

Card Blog Background Image

Component from Asteria Dashboard Builder

Credit Card

Component from Asteria Dashboard Builder

Card Coin Value

Component from Asteria Dashboard Builder

Card Coin List

Component from Asteria Dashboard Builder