15 Product Thumbnail

Use this pattern to show a list of product information along with pictures. This pattern is used mainly to provide a fast way to find items/products visually. Space is provided bellow the image to display the most relevant information of the product.

Refer to the Product Grid Starter Page to see an example of the Product Thumbnail pattern used on a list, arranged like a Grid.

15.1

Product Name
000123456789000
40.20 USD
Active
 <div class="product-thumbnail">
     <div class="product-image">
         <div class="img-wrapper">
         <span class="img-spacer"></span>
         <img src="../images/product-thumbnail.png" class="img img-responsive full-width">
         </div>
     </div>
     <div class="product-details">
         <div class="product-name">
             <a>Product Name</a>
         </div>
         <div class="product-code">
             000123456789000
         </div>
         <div class="product-price ">
             <span class="product-price-element">
                <span class="product-price-amount">40.20</span>
                <span class="product-price-currency">USD</span>
             </span>
         </div>
         <div class="label label-success">Active</div>
     </div>
 </div>

15.2 Display discounted prices

The Product Thumbnail can also display discounted prices. The original price will be displayed beside the discounted price. Both price have different styles to be easily recognizable.

Product Name
000123456789000
47.48   40.20 USD
Active
 <div class="product-thumbnail">
     <div class="product-image">
         <div class="img-wrapper">
         <span class="img-spacer"></span>
         <img src="../images/product-thumbnail.png" class="img img-responsive full-width">
         </div>
     </div>
     <div class="product-details">
         <div class="product-name">
             <a>Product Name</a>
         </div>
         <div class="product-code">
             000123456789000
         </div>
         <div class="product-price ">
             <span class="product-price-element product-price-original">
                <span class="product-price-amount">47.48</span></span>
             <span class="product-price-separator">&nbsp;</span>
             <span class="product-price-element product-price-effective">
                <span class="product-price-amount">40.20</span>
                <span class="product-price-currency">USD</span>
             </span>
         </div>
         <div class="label label-success">Active</div>
     </div>
 </div>

15.3 Display a price range

The Product Thumbnail Pattern can also display price ranges. By adding the class .product-price-range to the element with the class .product-price-element the price ranges will be displayed one below the other.

Product Name
000123456789000
47.48  –  49.48 40.20  –  42.48 USD
Active
 <div class="product-thumbnail">
     <div class="product-image">
         <div class="img-wrapper">
         <span class="img-spacer"></span>
         <img src="../images/product-thumbnail.png" class="img img-responsive full-width">
         </div>
     </div>
     <div class="product-details">
         <div class="product-name">
             <a>Product Name</a>
         </div>
         <div class="product-code">
             000123456789000
         </div>
         <div class="product-price ">
             <span class="product-price-element product-price-range product-price-original">
                <span class="product-price-amount">
                    47.48  
                    <span class="product-price-separator">&nbsp;&ndash;&nbsp;</span>
                    49.48
                </span>
             </span>
             <span class="product-price-element product-price-range product-price-effective">
                <span class="product-price-amount">
                    40.20
                    <span class="product-price-separator">&nbsp;&ndash;&nbsp;</span>
                    42.48
                </span>
                <span class="product-price-currency">USD</span>
             </span>
         </div>
         <div class="label label-success">Active</div>
     </div>
 </div>