Use the [pricing_grid]
shortcode to create a set of pricing tables. You can create a minimum of 2 pricing tables and a maximum of 6 pricing tables.
Two column pricing tables
from £29 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- 5 Domain
show code
[pricing_grid columns="2"]
[pricing_table table-config="" price="from £7 a month" table-caption="Plan 1" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £20 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table]
[/pricing_grid]
from £19 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
from £29 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- 5 Domain
show code
[pricing_grid columns="3"]
[pricing_table table-config="" price="from £7 a month" table-caption="Plan 1" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £15 a month" table-caption="Plan 2" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £20 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table]
[/pricing_grid]
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.
from £39 a month
- 24/5 Support
- 3 months Renewal
- 1 User Licence
- Contracts
- Unlimited bandwidth
from £49 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
- Unlimited bandwidth
from £69 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- Unlimited bandwidth
show code
[pricing_grid columns="3"]
[pricing_table table-config="" price="from £7 a month" table-caption="Plan 1" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]Not included[/li]
[/pricing_table][pricing_table table-config="tm-table-focus tm-shift-top" price="from £15 a month" table-caption="Plan 2" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]<a href="#" title="your tooltip goes here" data-uk-tooltip="{pos: 'top'}"><abbr>detail with tooltip</abbr></a>[/li]
[/pricing_table][pricing_table table-config="" price="from £20 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]Not included[/li]
[/pricing_table]
[/pricing_grid]
Four column pricing tables
from £19 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
from £29 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
from £199 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- 5 Domain
show code
[pricing_grid columns="4"]
[pricing_table table-config="" price="from £7 a month" table-caption="Plan 1" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £15 a month" table-caption="Plan 2" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £20 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £39 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table]
[/pricing_grid]
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.
from £19 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
from £29 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- Best option
- 3 Domain
from £199 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- 5 Domain
show code
[pricing_grid columns="4"]
[pricing_table_animate table-config="" price="from £9 a month" table-caption="Basic" action-url="#" action-caption="Get quote" animation="slide-right" delay="300"]
[li icon="icon-grav-checkmark-circle"]24/5 Support[/li]
[li icon="icon-grav-checkmark-circle"]3 months Renewal[/li]
[li icon="icon-grav-checkmark-circle"]1 User Licence[/li]
[li icon="icon-grav-checkmark-circle"]No Contracts[/li]
[li icon="icon-grav-checkmark-circle"]1 Domain[/li]
[/pricing_table_animate]
[pricing_table_animate table-config="" price="from £19 a month" table-caption="Premium" action-url="#" action-caption="Get quote" animation="slide-right" delay="100"]
[li icon="icon-grav-checkmark-circle"]24/6 Support[/li]
[li icon="icon-grav-checkmark-circle"]5 months Renewal[/li]
[li icon="icon-grav-checkmark-circle"]3 User Licences[/li]
[li icon="icon-grav-checkmark-circle"]No Contracts[/li]
[li icon="icon-grav-checkmark-circle"]3 Domain[/li]
[/pricing_table_animate]
[pricing_table_animate table-config="tm-table-focus tm-shift-top" price="from £29 a month" table-caption="Standard" action-url="#" action-caption="Get quote" animation="fade" delay="50"]
[li icon="icon-grav-checkmark-circle"]24/6 Support[/li]
[li icon="icon-grav-checkmark-circle"]5 months Renewal[/li]
[li icon="icon-grav-checkmark-circle"]3 User Licences[/li]
[li icon="icon-grav-checkmark-circle"]No Contracts[/li]
[li icon="icon-grav-checkmark-circle"]Best option[/li]
[li icon="icon-grav-checkmark-circle"]3 Domain[/li]
[/pricing_table_animate]
[pricing_table_animate table-config="" price="from £199 a month" table-caption="Developer" action-url="#" action-caption="Get quote" animation="slide-left" delay="400"]
[li icon="icon-grav-checkmark-circle"]24/7 Support[/li]
[li icon="icon-grav-checkmark-circle"]7 months Renewal[/li]
[li icon="icon-grav-checkmark-circle"]5 User Licences[/li]
[li icon="icon-grav-checkmark-circle"]No Contracts[/li]
[li icon="icon-grav-checkmark-circle"]5 Domain[/li]
[/pricing_table_animate]
[/pricing_grid]
Five column pricing tables
from £19 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
from £29 a month
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
- Free support
from £199 a month
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- 5 Domain
show code
[pricing_grid columns="5"]
[pricing_table table-config="" price="from £7 a month" table-caption="Plan 1" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £15 a month" table-caption="Plan 2" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="tm-table-focus tm-shift-top" price="from £20 a month" table-caption="Plan 3" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £20 a month" table-caption="Plan 4" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table][pricing_table table-config="" price="from £39 a month" table-caption="Plan 5" action-url="#" action-caption="Buy Now"]
[li icon="icon-grav-checkmark-circle"]detail 1[/li]
[li icon="icon-grav-checkmark-circle"]detail 2[/li]
[li icon="icon-grav-checkmark-circle"]detail 3[/li]
[/pricing_table]
[/pricing_grid]