<!-- card with dismis --> <div class="card"> <!-- media --> <div class="card-media"> <img class="responsive-img" src="https://picsum.photos/200" /> </div> <!-- content --> <div class="card-content "> <span class="title"> Chrome-book 500 </span> <span class="subtitle"> powered by Google </span> <div class="card-description"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. </div> <span>Price : <del>$500</del>   $455 </span> </div> <!-- footer --> <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</button> </div> <!-- card dismiss --> <div class="card-dismiss light-bg-color"> <span class="material-icons"> close </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