Cards

                     <!--Card with Badge  -->
<div class="card card-with-badge">  
   <!--For Card with dismiss icon remove card-with-badge class,
   add id="card-dismiss" and add the <i> tag below image -->
  <img src="" alt="Card-Image">
  <!-- <i class="card-close-icon far fa-times-circle"></i> -->
  <div class="card-header">
    <div class="card-title">Men's Slim fit Shirt</div>
      <div class="card-subtitle">
        Allen Solly
      </div>
  </div>
  <div class="ecom-card-info">
    <p class="ecom-card-price">Rs.2000</p>
    <p class="ecom-card-actual-price">Rs.2500</p>
    <p class="ecom-card-discount">15% off</p>
  </div>
  <div class="card-footer">
   <button class="btn btn-outline-primary ecom-card-btn">
     <i class="fas fa-shopping-cart"></i>
      Add to Cart
   </button>                      
  </div>
</div>                                                   

                 

<!-- For Card with shadow add the below code -->
<div class="card card-shadow">
  <img src="" alt="Card-Image">
  <!-- For overlay Text add card-title-overlay class next to card-header-->
  <div class="card-header">
    <div class="card-title">Card Title</div>
    <div class="card-subtitle">
      Card subtitle
    </div>
  </div>
  <div class="card-info">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, deserunt.</p>
  </div>
  <div class="card-footer">
    <a href="#" class="text-btn">Read</a>
    <a href="#" class="text-btn">Bookmark</a>
    <a href="#"><i class="card-icon fas fa-heart"></i></a>
    <a href="#"><i class="card-icon fas fa-share-alt"></i></a>
    <a href="#"><i class="card-icon fas fa-ellipsis-v"></i></a>                      
  </div>
</div>

                

<!-- For card with only text remove the card-img-hor div  -->

<div class="card">
  <div class="card-hor">
    <div class="card-img-hor">
      <img src="" alt="Card-Image">
    </div>
   <div class="card-header">
   <div class="card-title">Card Title</div>
    <div class="card-subtitle">
      Card subtitle
    </div>
   </div>
  <div class="card-info">
   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, deserunt.</p>
  </div>
  <div class="card-footer">
    <a href="#" class="text-btn">Read</a>
    <a href="#" class="text-btn">Bookmark</a>
    <a href="#"><i class="card-icon fas fa-heart"></i></a>
    <a href="#"><i class="card-icon fas fa-share-alt"></i></a>
    <a href="#"><i class="card-icon fas fa-ellipsis-v"></i></a>                  
  </div>
</div>
</div>