<!-- card-overlay --> <div class="card"> <!-- media div --> <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> <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> <!-- 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="overlay-content gray-bg-color"> <div class="overlay-text light-text">Out of Stock</div> <button class="btn btn-secondary btn-large">Remind me!</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