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
show code
[pricing_grid columns="two"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1 <span>save 10% on bundle</span>" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$20<sub>99</sup>" table-caption="Plan 3 <span>save 20% on bundle</span>" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table] [/pricing_grid]
show code
[pricing_grid columns="three"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1 <span>save 10% on bundle</span>" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$15<sub>99</sup>" table-caption="Plan 2 <span>save 30% on bundle</span>" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$20<sub>99</sup>" table-caption="Plan 3 <span>save 20% on bundle</span>" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table] [/pricing_grid]
Pricing tables with focus
You can set a pricing table to have focus by using the 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.
You can use the uk-text-success class and uk-text-danger class to change the color of the icons
$39 99
Standard Plan
- 24/5 Support
- 3 months Renewal
- 1 User Licence
- Contracts
- Unlimited bandwidth
$49 99
Professional Plan
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
- Unlimited bandwidth
$69 99
Developer Plan
- 24/7 Support
- 7 months Renewal
- 5 User Licences
- No Contracts
- Unlimited bandwidth
show code
[pricing_grid columns="three"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check uk-text-success"]detail 2[/li] [li icon="icon-times uk-text-danger"]Not included[/li] [/pricing_table][pricing_table table-config="focus tm-shift-top" price="$15<sub>99</sup>" table-caption="Plan 2" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check uk-text-success"]detail 2[/li] [li icon="icon-check uk-text-danger"]<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="$20<sub>99</sup>" table-caption="Plan 3" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check uk-text-success"]detail 2[/li] [li icon="icon-times uk-text-danger"]Not included[/li] [/pricing_table] [/pricing_grid]
Four column pricing tables
show code
[pricing_grid columns="four"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$15<sub>99</sup>" table-caption="Plan 2" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$20<sub>99</sup>" table-caption="Plan 3" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$39<sub>99</sup>" table-caption="Plan 3" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table] [/pricing_grid]
Five column pricing tables
$2999
Developer Plan
- 24/6 Support
- 5 months Renewal
- 3 User Licences
- No Contracts
- 3 Domain
- Free support
show code
[pricing_grid columns="five"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$15<sub>99</sup>" table-caption="Plan 2" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="focus tm-shift-top" price="$20<sub>99</sup>" table-caption="Plan 3" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$20<sub>99</sup>" table-caption="Plan 4" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table][pricing_table table-config="" price="$39<sub>99</sup>" table-caption="Plan 5" action-url="#" action-caption="Buy Now"] [li icon="icon-check"]detail 1[/li] [li icon="icon-check"]detail 2[/li] [li icon="icon-check"]detail 3[/li] [/pricing_table] [/pricing_grid]
