Pricing table

• Posted: March 18, 2016
• / By: Magda
• / In:

Present your prices  by just adding this simple HTML markup:

HTML markup

CSS

<article class="ct-pricingBox ct-u-backgroundWhite" data-height="555" style="min-height: 555px;"> <div class="ct-pricingBox-header text-center ct-fw-700"> <h3>Great savings</h3> <h1 class="text-uppercase ct-u-marginBoth10">15<span>%</span> off</h1> <h4>any service (excludes tax) with student ID</h4> </div> <div class="ct-pricingBox-desc"> <h5>Brakes, Exhaust, Fluids, Factory maintenance service, Suspension, Wheel alignments, Belts, Hoses, Headlamps, Bulbs &amp; more.</h5> </div> <div class="ct-pricingBox-logo"> <div class="media"> <div class="media-left"> <img class="media-object" src="assets/images/logo.png" alt="logo"> </div> <div class="media-body"> <h6 class="ct-fw-400">Must present coupon. Most cars. Discount off regular price. Consumer pays all tax. One coupon per total invoice. Not valid with other offers.</h6> </div> </div> </div> <div class="ct-pricingBox-btn text-center"> <div class="btn-group ct-u-paddingBoth10"> <button type="button" class="btn"><img src="assets/images/print.png" alt="print"> </button> <button class="btn btn-accent">Print this coupon</button> </div> </div> <div class="ct-pricingBox-footer ct-fw-400"> <h6 class="pull-left">Expires 11/16/2015</h6> <h6 class="pull-right">BD724NA</h6> </div> </article>

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 28 29 30 31 32 33 34 35 36 37 38 39

<article class="ct-pricingBox ct-u-backgroundWhite" data-height="555" style="min-height: 555px;">     <div class="ct-pricingBox-header text-center ct-fw-700">         <h3>Great savings</h3>           <h1 class="text-uppercase ct-u-marginBoth10">15<span>%</span> off</h1>         <h4>any service (excludes tax) with student ID</h4>     </div>     <div class="ct-pricingBox-desc">         <h5>Brakes, Exhaust, Fluids, Factory maintenance service, Suspension, Wheel             alignments,             Belts, Hoses, Headlamps, Bulbs &amp; more.</h5>     </div>     <div class="ct-pricingBox-logo">         <div class="media">             <div class="media-left">                 <img class="media-object" src="assets/images/logo.png" alt="logo">             </div>             <div class="media-body">                 <h6 class="ct-fw-400">Must present coupon. Most cars. Discount off                     regular                     price. Consumer pays all tax. One coupon per total invoice. Not                     valid with other                     offers.</h6>             </div>         </div>     </div>     <div class="ct-pricingBox-btn text-center">         <div class="btn-group ct-u-paddingBoth10">             <button type="button" class="btn"><img src="assets/images/print.png" alt="print">             </button>             <button class="btn btn-accent">Print this coupon</button>         </div>       </div>     <div class="ct-pricingBox-footer ct-fw-400">         <h6 class="pull-left">Expires 11/16/2015</h6>         <h6 class="pull-right">BD724NA</h6>     </div> </article>

Screenshot

Pricing tables