<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 ----------> <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>

.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; }