HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="ct-pricingBox"> <div class="ct-pricingBox-header"> <h4 class="ct-pricingBox-title">Single room</h4> <span class="ct-pricingBox-price"><sup>€</sup>25<sub>/ night</sub></span> <svg viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M0,50 L 100,50 100,0 Z"></path> </svg> </div> <ul class="ct-pricingBox-content list-unstyled"> <li class="ct-pricinBox-item ct-u-paddingTop40"><i class="fa fa-check-square-o"></i>Peak Season (3/1 - 10/31) <span><sup>€</sup>27</span></li> <li class="ct-pricinBox-item"><i class="fa fa-check-square-o"></i>Off-Season (11/1 - 2/28) <span><sup>€</sup>25</span></li> </ul> <div class="ct-pricingBox-footer text-center"> <svg viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M0,50 L 100,50 0,0 Z"></path> </svg> <a href="#" class="btn btn-link"><strong>Book</strong> now <span><i class="icon-right-small"></i></span></a> </div> </div> |
HTML markup (for pricing box with tooltip)
|
1 2 3 4 5 6 7 |
<div class="ct-pricingBox ct-pricingBox--special"> <div class="ct-pricingBox-header"> <div class="ct-pricingBox-tooltip"> <span><i class="fa fa-cc-visa"></i> No credit cards</span> </div> [ -- ] [ -- ] |
Available variations
There is available special pricing box with static tooltip on the top.
– new class required: ct-pricingBox–special
– new html markup required (example above)
We have here also a variation with a change of color for pricingBox.
– new class required: ct-pricingBox–switchColors
example
|
1 2 3 |
<div class="ct-pricingBox ct-pricingBox--switchColors"> [ -- ] </div> |
Screenshot
Pricing Box