<div class="card card-horizontal"> <!-- media div --> <div class="card-horizontal-top"> <div class="card-media"> <img class="" src="https://picsum.photos/200" /> </div> <!-- content div --> <div class="card-content"> <span class="title"> Chrome-book 500 </span> <span class="subtitle"> powered by Google </span> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> <span>Price : <del>$500</del>   $455 </span> </div> </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-outline"> Buy Now <span class="material-icons md-18"> shopping_bag </span> </button> </div> <div class="card-badge danger-bg-color light-text"> <span class=""> New </span> </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