<!-- card with header --> <div class="card"> <!-- card- header --> <div class="card-header"> <span class="title"> One Plus 9T</span> <span class="subtitle"> powered by oneplus </span> </div> <!-- media div --> <div class="card-media"> <img class="responsive-img" src="https://picsum.photos/200" /> </div> <!-- content div --> <div class="card-content"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> <span> <strong> Price :</strong> <del>$500</del>   $455 </span> </div> <!-- buttons div --> <div class="card-footer"> <button class="btn btn-secondary-outline"> <span class="material-icons md-18"> shopping_cart </span> Add to cart </button> <button class="btn btn-primary"> Buy Now <span class="material-icons md-18"> shopping_bag </span> </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