{Theme} have several types of product box
CSS styless:
.ct-productBox
.ct-productBox–style2
.ct-productBox–grey
.ct-productBox–moreInfo
.ct-productBox–moreInfo-inline
.ct-productBox–vertical
.ct-productBox–inline
.ct-productBox–verticalSmall
.ct-productBox–mini
Product box – default
Screenshot:
Markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-productBox ct-u-marginBottom50"> <div class="ct-productBox-image"> <div class="ct-productBox-imageContainer"><a href="#"><img src="assets/images/demo-content/product-image.jpg" alt="Product"></a></div> </div> <div class="ct-productBox-Description"> <div class="ct-productBox-DescriptionInner"><a href="#"> <h5 class="text-uppercase ct-u-marginBottom20 ct-fw-700">adventure day</h5></a> <p>Vestibulum congue elit vitae nisi vestiub ulum, ut porttitor velit miaximus etaiu ci.</p> </div> <div class="ct-productBox-Meta"><a href="#" class="btn btn-primary btn-xs text-uppercase ct-u-marginBoth10">more details</a><span class="ct-price">$49</span> <div class="clearfix"></div> </div> </div> </div> |
Product box – style 2
Screenshot:
Product box – style 2
Markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="ct-productBox ct-productBox--inline ct-productBox--style2 ct-u-marginBottom50"> <div class="ct-productBox-image"> <div class="ct-productBox-imageContainer"><a href="#"><img src="assets/images/demo-content/product-image14.jpg" alt="Product"></a></div> </div> <div class="ct-productBox-Description text-center"> <div class="ct-productBox-DescriptionInner"><a href="#"> <h6 class="text-capitalize ct-u-marginBottom10 ct-fw-400 text-left">Flutter of Pink Table Romance Centerpiece</h6></a><span class="ct-fw-600 ct-u-colorMotive ct-select-label">Quantity:</span> <select class="ct-select ct-js-selectize-slick ct-select--type2 ct-u-marginBottom10"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> <div class="clearfix"></div> <div class="ct-u-marginBottom20"><span class="ct-u-colorMotive ct-fw-700">Price: </span><span class="ct-fw-700 ct-js-price">$500</span></div> <button type="submit" class="btn btn-primary btn-lg">ADD ITEM</button> </div> </div> </div> |
Product box – more info
Screenshot:
Product box – more info
Markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="ct-productBox ct-productBox--moreInfo ct-productBox--moreInfo-inline"> <h4 class="h4 ct-u-marginBottom30">Skip the Line: Ancient Rome and Colosseum Half-Day Walking Tour</h4> <div class="ct-productBox-Description"> <div class="ct-productBox-image"> <div class="ct-productBox-imageContainer"><a href="#"><img src="assets/images/demo-content/trip.jpg" alt="Product"></a></div> </div> <div class="ct-productBox-Meta text-center"> <div class="ct-productBox-deliveryInformation"> <div class="ct-u-displayTableRow"> <div class="ct-productBox-MetaItem"><span class="ct-u-colorMotive ct-fw-700 text-uppercase">Days</span><span class="h5 text-uppercase ct-days">8</span></div> <div class="ct-productBox-MetaItem"><span class="ct-u-colorMotive ct-fw-700 text-uppercase">package</span><span class="h5 text-uppercase">BASIC</span></div> <div class="ct-productBox-MetaItem"> <div class="ct-productBox-price"><span class="ct-discount">$346</span><span class="ct-currency">$300</span></div> </div> </div> <div class="ct-u-displayTableRow"> <div class="ct-productBox-date ct-productBox-MetaItem"><span class="ct-u-colorMotive"><i class="fa fa-calendar"></i>Date</span><span class="ct-date">7/05/2015</span></div> <div class="ct-productBox-departure ct-productBox-MetaItem"><span class="ct-u-colorMotive"><i class="fa fa-plane"></i>Departure</span><span>AZ</span></div> <div class="ct-productBox-MetaItem"> <div data-rating="3" class="starrr"></div> </div> </div> </div><a href="#" class="btn btn-primary btn-sm text-uppercase ct-u-marginTop20">view trip</a> </div> </div> <p class="ct-u-marginTop20">Leave the crowds behind and head straight inside the Colosseum with your skip-the-line entrance ticket! In a group of no more than 25 people, explore the first...</p> </div> |
Product box – vertical product box
Screenshot:
Product box – vertical
Markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-productBox ct-productBox--vertical ct-productBox--verticalSmall ct-productBox--grey"> <div class="ct-productBox-image"> <div class="ct-productBox-imageContainer"><a href="#"><img src="assets/images/demo-content/product-small.jpg" alt="Product"></a> <div class="ct-ribbon text-uppercase"><span>$321</span></div> </div> </div> <div class="ct-productBox-Description"> <div class="ct-productBox-DescriptionInner"><a href="#"> <h5 class="text-uppercase ct-u-marginBottom10 ct-fw-700">the bouquet</h5></a> <p class="ct-u-marginBottom10">Luscious peony bouquet in fuchsia. Very nice & perfect for wedding.</p> </div> <div class="ct-productBox-Meta"><a href="#" class="btn btn-primary btn-xs text-uppercase">customize</a></div> </div> </div> |
Product box – mini product box
Screenshot:
Product box – mini
Markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="ct-productBox ct-productBox--mini"> <div class="ct-productBox-image"><img src="assets/images/demo-content/product-mini.jpg" alt="" class="ct-u-marginBottom20"> <div class="ct-productBox-price"> <div class="ct-productBox-iconBackground"><span class="ct-price"><span class="ct-currency">$</span>45</span></div> </div> </div> <div class="ct-productBox-Description"> <div class="ct-productBox-DescriptionInner"><a href="#"> <h5 class="text-uppercase ct-fw-700">The Grand Package</h5></a> <p class="ct-u-marginBottom10 ct-fw-700">Starting from $8 per person</p><a href="#" class="btn btn-primary btn-xs text-uppercase">book now</a> </div> </div> </div> |