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 <p>save 10% on bundle</p>" 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 <p>save 20% on bundle</p>" 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 <p>save 10% on bundle</p>" 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 <p>save 30% on bundle</p>" 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 <p>save 20% on bundle</p>" 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 uk-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

• show code

  [pricing_grid columns="three"] [pricing_table table-config="" price="$7<sub>99</sup>" table-caption="Plan 1 <p>save 10% on bundle</p>" 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 uk-shift-top" price="$15<sub>99</sup>" table-caption="Plan 2 <p>save 30% on bundle</p>" 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 <p>save 20% on bundle</p>" 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

• 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 uk-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]

Six column pricing tables

• show code

  [pricing_grid columns="six"] [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="$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="$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]