<div class="d-flex flex-column card br-top-sm"> <div class="card-media"> <img class="responsive-img br-top-sm" src="/src/img/backpack1.jpg" alt="no img"> <div class="badge-text bg-green-200 color-green-600 card-badge-topLeft font-size-sm"> <span class="material-icons badge-icon"> task_alt </span>Best Value</div> </div> <div class="card-body"> <h2 class="font-size-md m-0">Backpack</h2> <h class="font-size-sm color-gray-500">Grey & Black</h> <div class="card-desc font-weight-600"> <div>₹ 699</div> <div class="text-decoration-linethrough">₹ 1398</div> <div class="color-green-600">50% off</div> </div> </div> <button class="btn btn-add-cart btn-primary w-100-per font-size-regular">View Cart</button> </div> <div class="d-flex flex-column card br-top-sm"> <div class="card-media"> <img class="responsive-img br-top-sm" src="/src/img/backpack1.jpg" alt="no img"> <div class="badge-text bg-warn-200 color-warn-600 card-badge-topLeft font-size-sm"> <span class="material-icons badge-icon"> trending_up </span>Best Seller</div> </div> <div class="card-body"> <h2 class="font-size-md m-0">Backpack</h2> <h6 class="font-size-sm color-gray-500 m-0">Grey & Black</h6> <div class="card-desc font-weight-600"> <div>₹ 699</div> <div class="text-decoration-linethrough">₹ 1398</div> <div class="color-green-600">50% off</div> </div> </div> <button class="btn btn-add-cart btn-primary w-100-per font-size-regular">View Cart</button> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter