"product"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/timfarley/pen/RrVLmo?depth=everything&order=popularity&page=39&q=product&show_forks=false" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">.product-card { box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1); position: relative; margin: 20px auto; height: 300px; width: 260px; } .product-card .product-image-wrapper { border-bottom: 1px solid whitesmoke; position: absolute; width: 260px; } .product-card .product-image { display: block; height: auto; margin: 0 auto; width: 160px; } .product-card .product-price { background-color: white; border: 1px solid silver; color: dimgray; font-size: 16px; padding: 4px 8px; position: absolute; left: -4px; top: 150px; } .product-card .product-info { position: absolute; left: 10px; top: 172px; width: 250px; } .product-card .product-source { color: darkgray; font-size: 12px; margin-bottom: 4px; } .product-card .product-organic { color: olivedrab; display: block; font-size: 13px; } .product-card .product-name { color: gray; font-size: 15px; } .product-card .add-to-cart { border: 1px solid darkolivegreen; border-radius: 3px; background-color: olivedrab; display: block; width: 38px; height: 38px; position: absolute; overflow: hidden; top: 110px; right: 10px; } .product-card .add-to-cart:hover { border: 1px solid #39481f; } .product-card .add-to-cart .fa { display: block; color: white; font-size: 26px; margin-left: -1px; margin-top: 7px; margin-bottom: 8px; } .product-card .expand-view { border: 1px solid lightgray; border-radius: 3px; background-color: whitesmoke; display: none; width: 24px; height: 24px; position: absolute; overflow: hidden; } .product-card .expand-view:hover { border: 1px solid darkgray; } .product-card .expand-view .fa { display: block; color: darkgray; margin-top: 3px; margin-bottom: 2px; margin-left: -1px; } .product-card .add-to-recurring-order { border: 0; background-color: #f1f4f9; bottom: 0; font-size: 13px; color: slategray; padding: 4px; position: absolute; left: 0; right: 0; width: 100%; } .product-card .add-to-recurring-order .fa { color: steelblue; font-size: 18px; margin-right: 4px; } .product-card.concise { height: 80px; width: 300px; } .product-card.concise:hover { box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.15); } .product-card.concise .product-image-wrapper { border: none; width: 100px; } .product-card.concise .product-image { width: 80px; } .product-card.concise .product-price { font-size: 13px; padding: 3px 5px; left: -4px; top: 2px; } .product-card.concise .product-info { left: 100px; top: 0; width: 150px; } .product-card.concise .product-source { display: none; } .product-card.concise .add-to-recurring-order { display: none; } .product-card.concise .add-to-cart { height: 32px; width: 32px; top: 40px; right: 5px; } .product-card.concise .add-to-cart .fa { font-size: 22px; margin-top: 5px; } .product-card.concise .expand-view { display: block; top: 10px; right: 5px; } </style></head><body> <div class="product-card concise"> <div class="product-image-wrapper"> <img src="https://d39hcmrh8xztgk.cloudfront.net/product_product-large_php2QDejN.jpg" alt="Avocado" class="product-image" /> </div> <div class="product-price">$2.99</div> <p class="product-info"> <span class="product-source">VENDOR NAME</span> <span class="product-organic">Organic</span> <span class="product-name">Avocado Product Name Here Very Long</span> </p> <div> <button class="add-to-cart"><i class="fa fa-shopping-cart fa-lg"></i>Add to Cart</button> <button class="add-to-recurring-order"><i class="fa fa-cart-plus"></i>Get this item every week</button> <button class="expand-view"><i class="fa fa-ellipsis-h"></i>Expand View</button> </div> </div> <div class="product-card"> <div class="product-image-wrapper"> <img src="https://d39hcmrh8xztgk.cloudfront.net/product_product-large_php2QDejN.jpg" alt="Avocado" class="product-image" /> </div> <div class="product-price">$2.99</div> <p class="product-info"> <span class="product-source">VENDOR NAME</span> <span class="product-organic">Organic</span> <span class="product-name">Avocado Product Name Here Very Long</span> </p> <div> <button class="add-to-cart"><i class="fa fa-shopping-cart fa-lg"></i>Add to Cart</button> <button class="add-to-recurring-order"><i class="fa fa-cart-plus"></i>Get this item every week</button> <button class="expand-view"><i class="fa fa-ellipsis-h"></i>Expand View</button> </div> </div> </body></html>

Related: See More

Now UI Kit Angular
Bootstrap 4 and CCS3 Product Cards with Transition
eCommerce Product Detail
Product Detail Page - Ecommerce

Questions / Comments: