Cards

Normal

Gina Rugani
xxxx xxxx xxxx 0746
Expiry Date: 10/2023
Set as Default 
        
<div class="manage-card-col">
  <div class="manage-card-tile">
     <i class="icon-delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"></i>
     <div class="user-card-name">Gina Rugani</div>
     <div class="card-numder">xxxx xxxx xxxx 0746</div>
     <div class="expiryDate">Expiry Date: <span class="year-digit">10/2023</span></div>
     <div class="card-tile-footer">
        <div class="set-default-btn">
           <span class="toggle-btn">
           <label class="switch"><input type="checkbox"><span class="slider round"></span></label>
           </span><span class="set-default-lbl">Set as Default</span>
        </div>
        <img src="images/visa-l.png" class="ml-auto">
     </div>
  </div>

Active

Richard Gou
xxxx xxxx xxxx 0746
Expiry Date: 10/2023
Set as Default 
        
<div class="manage-card-col">
<div class="manage-card-tile active-tile">
       <i class="icon-delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"></i>
       <div class="user-card-name">Richard Gou</div>
       <div class="card-numder">xxxx xxxx xxxx 0746</div>
       <div class="expiryDate">Expiry Date: <span class="year-digit">10/2023</span></div>
       <div class="card-tile-footer">
          <div class="set-default-btn">
             <span class="toggle-btn">
             <label class="switch"><input type="checkbox"><span class="slider round"></span></label>
             </span><span class="set-default-lbl">Set as Default</span>
          </div>
          <img src="images/visa-l.png" class="ml-auto">
       </div>
       <i class="icon-flyout-arrow"><span class="path1"></span><span class="path2"></span></i>
    </div>
    </div>

Expired

John Appleseed
xxxx xxxx xxxx 0746
Expiry Date: 10/2020Expired
Set as Default 
        
<div class="manage-card-col">
  <div class="manage-card-tile expired">
  <i class="icon-delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"></i>
  <div class="user-card-name">John Appleseed</div>
  <div class="card-numder">xxxx xxxx xxxx 0746</div>
  <div class="expiryDate">Expiry Date: <span class="year-digit">10/2020</span><span class="badge badge-danger">Expired</span></div>
  <div class="card-tile-footer">
  <div class="set-default-btn switch-disabled">
  <span class="toggle-btn">
  <label class="switch"><input type="checkbox" disabled=""><span class="slider round"></span></label>
  </span><span class="set-default-lbl">Set as Default</span>
  </div>
  <img src="images/visa-l.png" class="ml-auto">
  </div>
  </div>
</div>