There are two types of Pricing Tables:
HTML MARKUP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="text-center ct-pricingBox ct-pricingBox--standard"> <div class="ct-pricingBox-title"> <h5 class="text-uppercase">Basic</h5> </div> <div class="ct-pricingBox-pricing"> <span class="ct-pricingBox-price">$34</span> <span class="ct-pricingBox-priceSub"> / <strong>month</strong></span> </div> <ul class="list-unstyled ct-pricingBox-list"> <li><i class="fa fa-check-square-o"></i> lorem ipsum</li> <li><i class="fa fa-check-square-o"></i> dolor sumit</li> <li><i class="fa fa-check-square-o"></i> lorem ipsum primus</li> <li><i class="fa fa-check-square-o"></i> dolor sumit simus</li> </ul> <a href="#" class="btn btn-xs btn-primary">Buy now</a> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="text-center ct-pricingBox ct-pricingBox--professional"> <div class="ct-pricingBox-title"> <h5 class="text-uppercase ct-fw-300 ct-u-size30">Basic</h5> <div class="ct-pricingBox-pricing"> <span class="ct-pricingBox-price">$34</span> </div> </div> <ul class="list-unstyled ct-pricingBox-list"> <li><i class="fa fa-check-square-o"></i> lorem ipsum</li> <li><i class="fa fa-check-square-o"></i> dolor sumit</li> <li><i class="fa fa-check-square-o"></i> lorem ipsum primus</li> <li><i class="fa fa-check-square-o"></i> dolor sumit simus</li> </ul> <a href="#" class="btn btn-xs btn-primary">Buy now</a> </div> |
Screenshot’s: