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.
[line_break/] [heading size=”h3″ style=”uk-module-title”]Two column pricing tables[/heading] [line_break/] [pricing_grid columns=”2″]
[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]
[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_grid] [line_break/] [toggle_code open=”false” title=”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][/toggle_code] [line_break/] [line_break/] [pricing_grid columns=”3″]
[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]
[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]
[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_grid] [line_break/] [toggle_code open=”false” title=”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][/toggle_code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Pricing tables with focus[/heading]
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.
[line_break/] [pricing_grid columns=”3″]
[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”]Contracts[/li] [li icon=”icon-grav-checkmark-circle”]Unlimited bandwidth[/li]
[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] [li icon=”icon-grav-checkmark-circle”]Unlimited bandwidth[/li]
[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”]Unlimited bandwidth[/li]
[/pricing_grid] [line_break/] [toggle_code open=”false” title=”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][/toggle_code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Four column pricing tables[/heading] [pricing_grid columns=”4″]
[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]
[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]
[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]
[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_grid] [line_break/] [toggle_code open=”false” title=”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][/toggle_code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Four column animated pricing tables[/heading]
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.
[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] [line_break/] [toggle_code open=”false” title=”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][/toggle_code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Five column pricing tables[/heading][line_break/] [pricing_grid columns=”5″]
[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]
[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]
[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] [li icon=”icon-grav-checkmark-circle”]Free support[/li]
[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]
[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_grid] [line_break/] [toggle_code open=”false” title=”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][/toggle_code]