<div class="card card__vertical"> <div class="card__overlay__container card__overlay"> <img class="card__img" src="../../assets/camera.jpg" alt="img" /> <div class="card__overlay__details"> <h3 class="card__overlay__title">OUT OF STOCK</h3> </div> </div> <div class="card__details"> <h3 class="card__title">Canon D6500</h3> <small class="card__sub-title">Canon D6500 super zoom camera</small> </div> <div class="card__price-section"> <strong class="selling__price">₹ 20000</strong> <small class="original__price">₹ 40000</small> <p class="card__discount">(50% off)</p> </div> <div class="card__buttons"> <button type="button" class="btn btn__disabled"> <i class="ri-shopping-cart-2-fill card__icon"></i> Add to cart </button> <button type="button" class="btn"> <i class="ri-heart-fill card__icon"></i> Wishlist </button> </div> </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