Use one of two types of product box:
- ct-productBox–type1
1234567891011121314151617181920<div class="ct-productBox ct-productBox--type1 ct-productBox--green"><div class="ct-productBox-image"><a href="assets/images/demo-content/macaroon1.jpg" class="ct-js-magnificPopupImage"><img src="assets/images/demo-content/thumbs/macaroon1.jpg" alt="Macaroon"></a></div><div class="ct-productBox-overlay"><a href="#"><div class="ct-productBox-overlayIcon"><i class="fa fa-shopping-cart"></i></div></a></div><a href="#" class="ct-productBox-content"><h4 class="ct-productBox-title text-uppercase">Matcha Green Tea</h4><span class="ct-productBox-description">A very delicious minty macaroon.</span></a></div>
- ct-productBox–type2
12345678910111213141516171819<div class="ct-productBox ct-productBox--type2 ct-productBox--green"><div class="ct-productBox-image"><img src="assets/images/demo-content/thumbs/macaroon4.jpg" alt="Macaroon"><div class="ct-productBox-overlay"><a href="#"><div class="ct-productBox-overlayIcon"><i class="fa fa-shopping-cart"></i></div></a></div></div><div class="ct-productBox-content"><h4 class="ct-productBox-title text-uppercase"><a href="#">The blueberry</a></h4><span class="ct-productBox-price ct-u-colorPrimary">$18,99</span><div class="ct-u-moustache"></div></div></div>
Both types of boxes have several color variables:
- ct-productBox–green
- ct-productBox–primary
- ct-productBox–blue
- ct-productBox–gold
- ct-productBox–purple
- ct-productBox–orange
- ct-productBox–gray