<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"> <button class="btn-icon bg-white card-badge-topRight "> <span class="material-icons color-red-600 ">favorite</span> </button> </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-secondary 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"> <button class="btn-icon bg-white card-badge-topRight"> <span class="material-icons color-gray-600 ">clear</span> </button> </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>
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