The kit
Elements [30]
Fancy Pricing Plans
Parent / child element
Fancy Pricing Plans
Pricing tables with a plan title, price, billing period, feature list and call-to-action button on every card. Choose from seven designs, feature one plan with a badge, and style cards, buttons and the featured plan separately.
Designs
7 designs
Columns
1 to 4 per row
Hover effects
Lift, glow, scale
Classic
Growth
Most popular- Unlimited projects
- 50 GB file storage
- Team analytics
- Priority support
Scale
- Everything in Growth
- 500 GB file storage
- SSO and audit log
- Dedicated manager
Cards
Dedicated
- Unlimited websites
- 1 TB NVMe storage
- Dedicated IP address
- 24/7 phone support
Minimal
Anytime
Popular- 24/7 access, every day
- All group classes
- Sauna and steam room
- One PT session a month
Premium
- Everything in Anytime
- Unlimited PT sessions
- Nutrition plan
- Bring a friend free
Bold
Grow
Recommended- Up to eight pages
- Custom design system
- SEO foundations
- Thirty days of support
Scale
- Unlimited pages
- WooCommerce store
- Analytics dashboard
- Ninety days of support
Elevated Cards
Growth
Most popular- Unlimited projects
- 50 GB file storage
- Team analytics
- Priority support
Scale
- Everything in Growth
- 500 GB file storage
- SSO and audit log
- Dedicated manager
Compact Table
Dedicated
- Unlimited websites
- 1 TB NVMe storage
- Dedicated IP address
- 24/7 phone support
Soft Rounded
Anytime
Popular- 24/7 access, every day
- All group classes
- Sauna and steam room
- One PT session a month
Premium
- Everything in Anytime
- Unlimited PT sessions
- Nutrition plan
- Bring a friend free
All seven designs share the same plan and colour settings. Switch between them with the Design option.
Example of fancy pricing plans with four columns, a glow hover effect and a custom bullet icon…
Example of fancy pricing plans with a dark featured plan and two columns…
Example of fancy pricing plans with rounded buttons and custom typography…
Grow
Recommended- Up to eight pages
- Custom design system
- SEO foundations
- Thirty days of support
Scale
- Unlimited pages
- WooCommerce store
- Analytics dashboard
- Ninety days of support
Use cases
Key features
What the element does, in plain terms. Every individual control is listed in the settings reference below.
Layout
Seven designs
Classic, Cards, Minimal, Bold, Elevated Cards, Compact Table and Soft Rounded, each built from the same plan settings.
Columns and spacing
Show one to four plans per row, with a column gap and padding on every side of each card.
Plans
Price and billing period
Each plan has a title, currency symbol, price and period such as /mo, /year or /project.
Feature lists
Features are rich text, so a bullet list shows tick icons straight away. Pick any icon as the bullet instead of the default check mark.
Call-to-action button
Each plan has its own button label, link and target. Leave the label empty to hide the button.
Highlighting
Featured plan
Mark one plan as featured to give it a badge, such as Popular, and its own background, border, text and button colours.
Hover effects
Cards can lift, glow or scale when a visitor hovers over them.
Styling
Typography
Separate font settings for plan titles, prices, feature text and buttons.
Colour controls
Card, border, title, price, feature text, accent, button and badge colours, plus the hard shadow colour of the Bold design.
Settings reference
Every setting the element exposes, grouped by builder tab. Options are listed where the setting offers a fixed set of choices.
Structure General tab
Design
Classic · Cards · Minimal · Bold · Elevated Cards · Compact Table · Soft Rounded
How the pricing tables look. Default Classic.
Pricing Plans
Child elements
Add, reorder, clone or remove plans. Each plan has its own settings, listed below.
Columns
1 · 2 · 3 · 4
The number of plan columns per row. Default 3.
Bullet Icon
Icon picker
The icon shown before each feature line. Leave empty for the default check mark.
Plan Title Tag
H1 · H2 · H3 · H4 · H5 · H6
The HTML tag used for plan titles. Default H3.
Element Visibility
Small · Medium · Large screen
Shows or hides the element on small, medium or large screens.
CSS Class
Adds a class to the wrapping HTML element.
CSS ID
Adds an ID to the wrapping HTML element.
Typography General tab
Title Typography
Font family, weight, size, line height, letter spacing
Font settings for the plan titles.
Price Typography
Font family, weight, size, line height, letter spacing
Font settings for the price amount.
Feature Text Typography
Font family, weight, size, line height, letter spacing
Font settings for the feature list items.
Button Typography
Font family, weight, size, line height, letter spacing
Font settings for the call-to-action button.
Cards Extras tab
Hover Effect
None · Lift · Glow · Scale
The animation when a visitor hovers over a card. Default None.
Column Gap (px)
Number. Default 24
The space between cards, in pixels.
Padding
Top · Right · Bottom · Left. Default 32 · 28 · 32 · 28
The padding inside each card, in pixels.
Pricing Plan Child element, one per plan
Plan Title
Text
The name of the plan, for example Starter.
Currency
Text, for example $
The currency symbol shown before the price.
Price
Text, for example 29
The price amount.
Period
Text, for example /mo
The billing period shown after the price.
Features
Rich text
The plan features. It starts as a bullet list so the tick icons show straight away, and also accepts numbered lists, links and paragraphs.
Featured
Yes · No
Highlights this plan as the recommended one. Default No.
Badge Text
Text
The label on the featured badge. Defaults to Popular. Shown when Featured is Yes.
Button Label
Text
The text on the call-to-action button. Leave empty to hide the button.
Button Link
Link
Where the button points.
Button Target
Same Window · New Window
Opens the link in the same or a new tab. Default Same Window.
Colours Design tab
Background Color
Colour. Default #ffffff
The background of each plan card.
Border Width
Top · Right · Bottom · Left
The card border width on each side, in pixels. Not used by Bold or Compact Table.
Border Color
Colour. Default #e6e6e6
The colour of the card border. Not used by Bold or Compact Table.
Border Radius
Number. Default 12
The card corner rounding. Set 0 for sharp corners. Not used by Bold or Compact Table.
Title Color
Colour. Default #1a1a1a
The colour of the plan titles.
Price Color
Colour. Default #1a1a1a
The colour of the price amount.
Feature Text Color
Colour. Default #4a4a4a
The colour of the feature list items.
Accent Color
Colour. Default #65bc7b
The colour of the bullet icons, and the default button colour.
Button Background
Colour
The button fill. Leave empty to use the accent colour.
Button Text Color
Colour. Default #ffffff
The text colour of the call-to-action button.
Button Border Color
Colour
The button border. Leave empty to match the button background.
Box Shadow Color
Colour. Default #111111
The colour of the hard offset shadow on Bold design cards.
Featured plan Design tab
Featured Background
Colour
The background of the featured plan. Leave empty to use the design default.
Featured Border Color
Colour
The border colour of the featured card. Leave empty to use the card border colour.
Featured Text Color
Colour
The text colour inside the featured plan. Leave empty to use the design default.
Featured Button Background
Colour
The button fill on the featured card. Leave empty to use the design default.
Featured Button Text Color
Colour
The button text on the featured card. Leave empty to use the design default.
Badge Background
Colour
The background of the featured badge. Leave empty to use the accent colour. Not used by Bold.
Badge Text Color
Colour
The text colour of the featured badge. Leave empty to use the button text colour. Not used by Bold.
On this page