// variant 1 <div class="card-wrapper product-card horizontal-card-wrapper d-flex"> <div class="p-4 container-center"> <img class="img-responsive horizontal-card-img" src="../../assets/monitor.png" alt="monitor image" /> </div> <div class="p-3"> <h2 class="cart-product-heading">LG 22 inch (55 cm) IPS Monitor</h2> <div class="pt-3"> <div class="product-price-wrapper"> <span class="product-discount-price text-sm font-wt-bold" >Rs. 7,999.00</span > <span class="product-original-price text-sm ml-6" >Rs. 9,438.82</span > </div> <span class="product-discount font-wt-bold text-sm">Save 18%</span> </div> <div class="horizontal-card-btns-wrapper p-3 d-flex flex-col"> <button type="button" class="btn btn-primary rounded-sm text-sm p-3"> <i class="fas fa-shopping-cart mr-3"></i> Add to Cart </button> <button type="button" class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3" > <i class="fas fa-heart mr-3"></i> Add to Wishlist </button> </div> </div> </div> //variant 2 <div class="card-wrapper w-100 d-flex mt-4"> <div class="p-4 container-center"> <img class="img-responsive horizontal-card-img w-75" src="../../assets/monitor.png" alt="monitor image" /> </div> <div class="p-3 w-100"> <h2 class="cart-product-heading">LG 22 inch (55 cm) IPS Monitor</h2> <div class="pt-3"> <div class="product-price-wrapper"> <span class="product-discount-price text-sm font-wt-bold" >Rs. 7,999.00</span > <span class="product-original-price text-sm ml-6" >Rs. 9,438.82</span > </div> <span class="product-discount font-wt-bold text-sm">Save 18%</span> </div> <div class="d-flex my-2"> <div class="d-flex align-center"> <button type="button" class="btn btn-quantity btn-primary rounded-full" > <i class="fas fa-plus text-sm"></i> </button> <span class="text-sm mx-2 font-wt-semibold">1</span> <button type="button" class="btn btn-quantity btn-outline btn-primary-outline rounded-full" > <i class="fas fa-minus text-sm"></i> </button> </div> <button type="button" class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 ml-8" > <i class="fas fa-trash mr-3"></i> Remove </button> <button type="button" class="btn btn-primary rounded-sm text-sm p-3 ml-auto" > <i class="fas fa-heart mr-3"></i> Move to Wishlist </button> </div> </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