Card

Cards provide a flexible and extensible content container with multiple variants and options.

Examples

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="../../assets/img/theme/img-1-1000x600.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Stats card

New users
2,356

3.48% Since last month 

<div style="width: 18rem;">
  



<div class="card card-stats">
    

    

    

    

    
    <!-- Card body -->
    <div class="card-body">
        
<div class="row">
    <div class="col">
        <h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
        <span class="h2 font-weight-bold mb-0">2,356</span>
    </div>
    <div class="col-auto">
      <div class="icon icon-shape bg-orange text-white rounded-circle shadow">
          <i class="ni ni-chart-pie-35"></i>
      </div>
    </div>
</div>
<p class="mt-3 mb-0 text-sm">
    <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
    <span class="text-nowrap">Since last month</span>
</p>

    </div>

    

    
</div>




</div>