You can create a minimum of 2 pricing tables and a maximum of 6 pricing tables.
Two column pricing tables
Premium
from £29 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- 5 Domain
show code
<div class="tm-pricing uk-grid-width-medium-1-2 uk-clearfix uk-margin-top">
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Basic</div>
<div class="tm-price-tag">
<h3>from £9 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/5 Support</li>
<li><i class="uk-icon-check"></i>3 months Renewal</li>
<li><i class="uk-icon-check"></i>1 User Licence</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>1 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Premium</div>
<div class="tm-price-tag">
<h3>from £29 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/7 Support</li>
<li><i class="uk-icon-check"></i>7 months Renewal</li>
<li><i class="uk-icon-check"></i>5 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>5 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
</div>
Premium
from £19 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
Standard
from £29 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- 5 Domain
show code
<div class="tm-pricing uk-grid-width-medium-1-3 uk-clearfix uk-margin-top">
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Basic</div>
<div class="tm-price-tag">
<h3>from £9 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/5 Support</li>
<li><i class="uk-icon-check"></i>3 months Renewal</li>
<li><i class="uk-icon-check"></i>1 User Licence</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>1 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Premium</div>
<div class="tm-price-tag">
<h3>from £19 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/6 Support</li>
<li><i class="uk-icon-check"></i>5 months Renewal</li>
<li><i class="uk-icon-check"></i>3 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>3 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Standard</div>
<div class="tm-price-tag">
<h3>from £29 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/7 Support</li>
<li><i class="uk-icon-check"></i>7 months Renewal</li>
<li><i class="uk-icon-check"></i>5 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>5 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
</div>
Pricing tables with focus
You can set a pricing table to have focus by using the tm-table-focus option in the table-config attribute. You can further shift the focus pricing table upwards to create symmetry by using the tm-shift-top option. Notice also how the focused table has more items to make it larger and thus fitting with the shift.
Basic
from £39 a month
- 24/5 Support
- 3 months Renewal
- 1 User Licence
- Contracts
- Unlimited bandwidth
Premium
from £49 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
- Unlimited bandwidth
Standard
from £69 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- Unlimited bandwidth
show code
<div class="tm-pricing uk-grid-width-medium-1-3 uk-clearfix uk-margin-top">
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Basic</div>
<div class="tm-price-tag">
<h3>from £39 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/5 Support</li>
<li><i class="uk-icon-check"></i>3 months Renewal</li>
<li><i class="uk-icon-check"></i>1 User Licence</li>
<li><i class="uk-icon-check"></i>Contracts</li>
<li><i class="uk-icon-check"></i>Unlimited bandwidth</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left tm-table-focus tm-shift-top">
<div class="tm-price-title">Premium</div>
<div class="tm-price-tag">
<h3>from £49 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/6 Support</li>
<li><i class="uk-icon-check"></i>5 months Renewal</li>
<li><i class="uk-icon-check"></i>3 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>3 Domain</li>
<li><i class="uk-icon-check"></i>Unlimited bandwidth</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Standard</div>
<div class="tm-price-tag">
<h3>from £69 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/7 Support</li>
<li><i class="uk-icon-check"></i>7 months Renewal</li>
<li><i class="uk-icon-check"></i>5 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>Unlimited bandwidth</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
</div>
Four column pricing tables
Premium
from £19 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
Standard
from £29 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
Developer
from £199 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- 5 Domain
show code
<div class="tm-pricing uk-grid-width-medium-1-4 uk-clearfix uk-margin-top">
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Basic</div>
<div class="tm-price-tag">
<h3>from £9 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/5 Support</li>
<li><i class="uk-icon-check"></i>3 months Renewal</li>
<li><i class="uk-icon-check"></i>1 User Licence</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>1 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Premium</div>
<div class="tm-price-tag">
<h3>from £19 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/6 Support</li>
<li><i class="uk-icon-check"></i>5 months Renewal</li>
<li><i class="uk-icon-check"></i>3 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>3 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Standard</div>
<div class="tm-price-tag">
<h3>from £29 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/6 Support</li>
<li><i class="uk-icon-check"></i>5 months Renewal</li>
<li><i class="uk-icon-check"></i>3 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>3 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Developer</div>
<div class="tm-price-tag">
<h3>from £199 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/7 Support</li>
<li><i class="uk-icon-check"></i>7 months Renewal</li>
<li><i class="uk-icon-check"></i>5 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>5 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
</div>
Four column animated pricing tables
Use the [pricing_table_animate] shortcode to animate the pricing tables. You can set the animation as fade, scale-up, scale-down, slide-top, slide-bottom, slide-left, slide-right, shake or scale. Set the delay option in milliseconds to alter the order in which they appear.
Premium
from £19 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
Standard
from £29 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- Best option
- 3 Domain
Developer
from £199 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- 5 Domain
show code
<div class="tm-pricing uk-grid-width-medium-1-4 uk-clearfix uk-margin-top">
<div class="tm-price-column uk-float-left" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:300}">
<div class="tm-price-title">Basic</div>
<div class="tm-price-tag">
<h3>from £9 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/5 Support</li>
<li><i class="uk-icon-check"></i>3 months Renewal</li>
<li><i class="uk-icon-check"></i>1 User Licence</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>1 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Get quote</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left" data-uk-scrollspy="{cls:'uk-animation-slide-right', delay:100}">
<div class="tm-price-title">Premium</div>
<div class="tm-price-tag">
<h3>from £19 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/6 Support</li>
<li><i class="uk-icon-check"></i>5 months Renewal</li>
<li><i class="uk-icon-check"></i>3 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>3 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Get quote</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left tm-table-focus tm-shift-top" data-uk-scrollspy="{cls:'uk-animation-fade', delay:50}">
<div class="tm-price-title">Standard</div>
<div class="tm-price-tag">
<h3>from £29 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/6 Support</li>
<li><i class="uk-icon-check"></i>5 months Renewal</li>
<li><i class="uk-icon-check"></i>3 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>Best option</li>
<li><i class="uk-icon-check"></i>3 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Get quote</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left" data-uk-scrollspy="{cls:'uk-animation-slide-left', delay:400}">
<div class="tm-price-title">Developer</div>
<div class="tm-price-tag">
<h3>from £199 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/7 Support</li>
<li><i class="uk-icon-check"></i>7 months Renewal</li>
<li><i class="uk-icon-check"></i>5 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>5 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Get quote</a>
</div>
</div>
</div>
</div>
Five column pricing tables
Premium
from £19 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
Standard
from £29 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
- Free support
Developer
from £199 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- 5 Domain
show code
<div class="tm-pricing uk-grid-width-medium-1-5 uk-clearfix uk-margin-top">
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Basic</div>
<div class="tm-price-tag">
<h3>from £9 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/5 Support</li>
<li><i class="uk-icon-check"></i>3 months Renewal</li>
<li><i class="uk-icon-check"></i>1 User Licence</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>1 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Premium</div>
<div class="tm-price-tag">
<h3>from £19 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/6 Support</li>
<li><i class="uk-icon-check"></i>5 months Renewal</li>
<li><i class="uk-icon-check"></i>3 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>3 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left tm-table-focus tm-shift-top">
<div class="tm-price-title">Standard</div>
<div class="tm-price-tag">
<h3>from £29 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/6 Support</li>
<li><i class="uk-icon-check"></i>5 months Renewal</li>
<li><i class="uk-icon-check"></i>3 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>3 Domain</li>
<li><i class="uk-icon-check"></i>Free support</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Life</div>
<div class="tm-price-tag">
<h3>from £59 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/6 Support</li>
<li><i class="uk-icon-check"></i>5 months Renewal</li>
<li><i class="uk-icon-check"></i>3 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>3 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
<div class="tm-price-column uk-float-left">
<div class="tm-price-title">Developer</div>
<div class="tm-price-tag">
<h3>from £199 a month</h3>
</div>
<div class="tm-price-content">
<ul class="tm-price-list uk-float-left uk-width-1-1">
<li><i class="uk-icon-check"></i>24/7 Support</li>
<li><i class="uk-icon-check"></i>7 months Renewal</li>
<li><i class="uk-icon-check"></i>5 User Licences</li>
<li><i class="uk-icon-check"></i>No Contracts</li>
<li><i class="uk-icon-check"></i>5 Domain</li>
</ul>
<div class="tm-price-bottom uk-text-center">
<a class="uk-button uk-button-line" href="#">Buy Now</a>
</div>
</div>
</div>
</div>
