Builder - Pricing Table

Back to Builder

ID Section

Container

Container Small Normal Large

Vertical Align Top Center Bottom

Background Color

Tab Pricing Style Style A Style B

Corner Box Style Rounded Small Rounded Rounded Large Rounded X Large

Box Model skin Light Dark

Hover Style Jump Effect Scaling Effect Hover the box to test effect

Button Style Solid Outline

Border Box Style Rounded Small Rounded Rounded Large Rounded X Large

Services 1 Content

Title

Pricing

HTML

Button Text

Target Link

Services 2 Content

Title

Pricing

HTML

Button Text

Target Link

Services 3 Content

Title

Pricing

HTML

Button Text

Target Link

Services 4 Content

Title

Pricing

HTML

Button Text

Target Link

Get Code

<!--========== PRICING ==========--> <section id="{{specialID}}" style="background: {{bgHeadColor}};"> <div class="{{dfltContainer}}"> <div class="Medes-row {{ValginCenter}} {{tabpricStyle}} {{tabpricBoxStyle}}"> <div class="columns three-res"> <div class="content text-center {{HoverJump}} {{boxRoundedSM}} reveal"> <div class="price-package"> <h3>{{tabpricTitle1}}</h3> <h2>{{tabpricPric1}}</h2> </div> <ul class="pricing-include">{{tabpricContent1}}</ul> <div class="select-price"> <a href="{{tabpricTarget1}}" class="{{btnStyle}} btn-prc {{boxRounded}}">{{tabpricBtn1}}</a> </div> </div> </div> <div class="columns three-res"> <div class="content text-center {{HoverJump}} {{boxRoundedSM}} reveal"> <div class="price-package"> <h3>{{tabpricTitle2}}</h3> <h2>{{tabpricPric2}}</h2> </div> <ul class="pricing-include">{{tabpricContent2}}</ul> <div class="select-price"> <a href="{{tabpricTarget2}}" class="{{btnStyle}} btn-prc {{boxRounded}}">{{tabpricBtn2}}</a> </div> </div> </div> <div class="columns three-res"> <div class="content text-center {{HoverJump}} {{boxRoundedSM}} reveal"> <div class="price-package"> <h3>{{tabpricTitle3}}</h3> <h2>{{tabpricPric3}}</h2> </div> <ul class="pricing-include">{{tabpricContent3}}</ul> <div class="select-price"> <a href="{{tabpricTarget3}}" class="{{btnStyle}} btn-prc {{boxRounded}}">{{tabpricBtn3}}</a> </div> </div> </div> <div class="columns three-res"> <div class="content text-center {{HoverJump}} {{boxRoundedSM}} reveal"> <div class="price-package"> <h3>{{tabpricTitle4}}</h3> <h2>{{tabpricPric4}}</h2> </div> <ul class="pricing-include">{{tabpricContent4}}</ul> <div class="select-price"> <a href="{{tabpricTarget4}}" class="{{btnStyle}} btn-prc {{boxRounded}}">{{tabpricBtn4}}</a> </div> </div> </div> </div> </div> </section> <!--========== PRICING END ==========-->

{{tabpricBtn1}}

{{tabpricBtn2}}

{{tabpricBtn3}}

{{tabpricBtn4}}