Pricing Table
Use Pricing Table to build side-by-side pricing boxes with feature lists, ribbons, dual billing, and call-to-action buttons.
Usage​
Use Pricing Table to compare plans, packages, or tiers in a row of pricing boxes. Each box supports a title, ribbon, price with duration, feature list with optional icons and tooltips, and a call-to-action button. The module renders an embedded Button module per box and supports an optional dual billing toggle so visitors can switch between two billing options, such as monthly and yearly.
Use Pricing Table on sales pages, product pages, signup flows, and landing pages where prospects need a quick comparison of plans and a clear path to convert. It fits SaaS pricing, membership tiers, service packages, and donation levels where each option needs its own feature list and CTA.
Module Settings​
The Pricing Table module settings control the pricing boxes and their content, the icons and tooltips used in feature lists, and the shared styling for borders, feature lists, the dual billing toggle, and billing terms.
Pricing Boxes Tab​
The Pricing Boxes tab manages the individual pricing boxes shown in the table, the dual billing toggle, and the default icons used across feature lists.
Pricing Box
The Pricing Box repeater adds, removes, and reorders the columns shown in the pricing table. Each entry opens its own settings form with General, Button, and Style tabs.
General Tab
Title
The heading shown at the top of the pricing box.
Ribbon
The Ribbon section adds a labeled banner to the pricing box, often used to mark a featured or recommended plan.
Ribbon Settings
Show Ribbon Default: No
Shows or hides the ribbon on this pricing box. Selecting Yes reveals the ribbon text and position fields and the Ribbon Style section in the Style tab.
Ribbon Text Supports: Field Connections
The text displayed inside the ribbon. Nothing displays if left empty.
Ribbon Position Default: Top
Sets where the ribbon attaches to the pricing box.
- Top: Places a full-width ribbon above the pricing box.
- Top Right: Places a diagonal ribbon in the top right corner of the box.
- Top Left: Places a diagonal ribbon in the top left corner of the box.
Price Box
The Price Box section sets the price values displayed in the box.
Price Box Settings
Price Default: $ 0.00
The primary price displayed in the box. When Enable Dual Billing? is set to No, this is the only price shown.
Duration
The text shown next to the price, such as per Year. Used when Enable Dual Billing? is set to No.
Price Option 2 Default: $ 0.00
The price shown for the second billing option. Displayed when Enable Dual Billing? is set to Yes and the visitor toggles to the second option.
Features
The Features section manages the feature list shown inside the pricing box.
Price Features
Price Features
A repeater of feature rows for this pricing box. Each row accepts a description, an optional icon that overrides the default feature icon, and optional tooltip text shown when the visitor activates the tooltip icon.
Button Tab
Button Text Default: Get Started
The label displayed on the call-to-action button.
Button URL Supports: Field Connections
The destination link used when the button is clicked.
Link settings
Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.
Separate Billing Option URLs Default: No
Controls whether the button uses a single URL for both billing options or a separate URL for each. Set to Yes to reveal Button URL (Option 2), which is used when the visitor toggles to the second billing option.
Button URL (Option 2)
Button URL (Option 2) Supports: Field Connections
The link used for the second billing option when Separate Billing Option URLs is set to Yes.
Link settings
Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.
Button Icon
The Button Icon section adds and styles an optional icon on the button.
Button Icon Settings
Button Icon Supports: Field Connections
Selects an icon from the icon picker, or removes the current icon.
Button Icon Position Default: Before Text
Places the icon before or after the button text when an icon is selected.
Button Icon Visibility Default: Always Visible
Keeps the icon visible or fades it in on hover when an icon is selected.
- Always Visible: The icon is shown at all times.
- Fade In On Hover: The icon fades in when the button is hovered.
Button Style
The Button Style section controls the size, alignment, and inner spacing of the button.
Button Style Settings
Button Width Default: Full Width
Sets the button width.
- Auto: The button width fits its text and padding. Reveals Button Align.
- Full Width: The button stretches to fill the column.
Button Align
Button Align Default: Center; Supports: Responsive
The horizontal alignment of the button when Button Width is set to Auto.
Button Padding Supports: Responsive
The inner spacing of the button.
Button Text
The Button Text section controls the color and typography of the button label.
Button Text Settings
Button Text Color Default: ffffff; Supports: Field Connections
The color of the button label.
Button Text Hover Color Supports: Field Connections
The color of the button label on hover and focus.
Button Typography Supports: Responsive
The font settings for the button label.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Button Background
The Button Background section controls the background color, fill style, and hover transition of the button.
Button Background Settings
Button Background Color Supports: Field Connections
The default background color of the button.
Button Background Hover Color Supports: Field Connections
The background color used when the button is hovered or focused.
Button Background Style Default: Flat
Selects between a solid or gradient button background.
- Flat: Uses the Button Background Color as a solid fill.
- Gradient: Renders a gradient based on the configured background colors.
Button Background Animation Default: Disabled
Enables or disables the transition between the normal and hover background states.
Button Border
The Button Border section controls the border around the button.
Button Border Settings
Button Border Supports: Responsive
The border style, width, radius, and color applied to the button.
Button Border Hover Color Supports: Field Connections
The border color used when the button is hovered or focused.
Style Tab
General Style
The General Style section controls the box colors, accent colors, and top margin for this pricing box.
General Style Settings
Box Border Default: F2F2F2; Supports: Field Connections
The color used for the border around this pricing box.
Box Color Default: ffffff; Supports: Field Connections
The background color of the pricing box body.
Accent Color Default: 66686b; Supports: Field Connections
The accent color used for the highlighted area, such as the price or title region depending on the Highlight setting.
Accent Text Color Default: ffffff; Supports: Field Connections
The text color used inside the highlighted area.
Box Top Margin Default: 0; Supports: Responsive
The top margin applied to this pricing box, useful for offsetting a featured column.
Title Style
The Title Style section controls the appearance of the pricing box title.
Title Style Settings
Title Color Default: 333333
The color of the pricing box title.
Title Typography Supports: Responsive
The font settings for the pricing box title.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Price Style
The Price Style section controls the appearance of the price value.
Price Style Settings
Price Color
The color of the price text.
Typography Supports: Responsive
The font settings for the price text.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Ribbon Style
This section is available when Show Ribbon is set to Yes in the General tab.
Ribbon Style Settings
Ribbon Text Color Default: FFFFFF; Supports: Field Connections
The text color used inside the ribbon.
Ribbon Background Color Default: F8463F; Supports: Field Connections
The background color of the ribbon.
Typography Supports: Responsive
The font settings for the ribbon text.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Ribbon Height Default: 30
The height of the ribbon, in pixels.
Ribbon Top Margin Default: -15
The top margin applied to the ribbon when Ribbon Position is set to Top, in pixels.
Top Ribbon Padding Default: 0
The inner spacing of the ribbon when Ribbon Position is set to Top.
Top Ribbon Border
The border style, width, radius, and color applied to the ribbon when Ribbon Position is set to Top.
Ribbon Side Offset Default: 40
The horizontal offset of the ribbon, in pixels, when Ribbon Position is set to Top Right or Top Left.
Feature List Style
The Feature List Style section overrides the shared feature list colors for this pricing box.
Feature List Style Settings
Feature Icon Color
The color applied to the feature icons in this box. Overrides the shared Feature Icon Color in the Style tab.
Feature Text Color
The color applied to the feature text in this box. Overrides the shared Feature Text Color in the Style tab.
Tooltip Icon Color
The color applied to the tooltip icon in this box. Overrides the shared Tooltip Icon Color in the Style tab.
Tooltip Text Color
The text color used inside tooltips in this box. Overrides the shared tooltip text color set in the Style tab.
Tooltip Background Color
The background color used for tooltips in this box. Overrides the shared tooltip background color set in the Style tab.
General
The General section controls the dual billing toggle and the labels used for each billing option.
General Settings
Enable Dual Billing? Default: No
Adds a toggle that lets visitors switch between two billing options, such as monthly and yearly. Selecting Yes reveals the billing option labels, billing term fields, the Toggle Price Button style section, and the Billing Term Style section.
Billing Option 1 Default: Monthly
The label shown next to the first billing toggle option.
Billing Option 2 Default: Yearly
The label shown next to the second billing toggle option.
Billing Term (Option 1)
The text shown next to the first price when dual billing is enabled, such as per month. Leave empty to hide.
Billing Term (Option 2)
The text shown next to the second price when dual billing is enabled, such as per year. Leave empty to hide.
Icons
The Icons section sets the default icons used across all pricing boxes for feature list items and tooltips. Individual feature rows can override the feature icon.
Icons Settings
Default Feature Icon Supports: Field Connections
The icon shown next to each feature when no icon is set on the feature row. Individual feature rows can override this.
Feature Tooltip Icon Default: fas fa-question-circle; Supports: Field Connections
The icon used to trigger feature tooltips. Defaults to the question mark icon when not specified.
Style Tab​
The Style tab controls the shared appearance of the pricing table, including the highlight area, column heights, borders, feature list styling, the dual billing toggle button, and billing term text.
General Style
The General Style section controls the highlighted area, column height behavior, and outer spacing of the pricing table.
General Style Settings
Highlight Default: Price
Selects which region of each pricing box is rendered with the Accent Color background.
- Price: Highlights the price region of each box.
- Title: Highlights the title region of each box.
- None: Disables the accent highlight.
Column Height
Controls how box heights align across the pricing table.
- Equalize: Sets all columns to the same height as the tallest column.
- Auto: Lets each column size to its own content. Reveals Features Min Height.
Features Min Height
Features Min Height Default: 0
The minimum height applied to the feature list area, in pixels. Use this to normalize box heights when columns have different numbers of features.
Advanced Spacing Default: 12; Supports: Responsive
The horizontal spacing between pricing boxes, in pixels.
Border
The Border section controls how borders are drawn around each pricing box.
Border Settings
Border Type Default: Legacy
Selects which border system the module uses.
- Standard: Uses a single border control with style, width, radius, and color. Reveals Standard Border.
- Legacy: Uses the original preset-based border. Reveals Border Style and Border Size.
Standard Border Settings
Standard Border
The border style, width, radius, and color applied to each pricing box when Border Type is set to Standard.
Legacy Border Settings
Border Style Default: Rounded
Selects between rounded or straight corners when Border Type is set to Legacy.
- Rounded: Applies rounded corners to each pricing box.
- Straight: Uses square corners on each pricing box.
Border Size Default: Wide
Sets the visual weight of the legacy border preset.
- Large: A wide border around each pricing box.
- Medium: A balanced border weight.
- Small: A thin border around each pricing box.
Feature List Style
The Feature List Style section controls the shared appearance of feature lists, separator lines, and tooltips across all pricing boxes.
Feature List Style Settings
Show List Separator Default: Yes
Shows or hides a horizontal separator line between feature rows. Selecting Yes reveals Separator Line Color.
Separator Line Color
Separator Line Color Default: rgba(0,0,0,0.15)
The color of the line drawn between feature rows.
Feature Icon Size Supports: Responsive
The size of each feature icon, in pixels.
Feature Icon Color Default: 808080
The color applied to feature icons across all pricing boxes.
Feature Text Color Default: 808080
The color applied to feature text across all pricing boxes.
Feature List Text Typography Supports: Responsive
The font settings for feature list text.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Tooltip Style Default: Dark
Selects the visual style used by feature tooltips.
- Dark: Uses a dark tooltip background with light text. Reveals Tooltip Text Color and Tooltip Background Color for the dark variant.
- Light: Uses a light tooltip background with dark text. Reveals Tooltip Text Color and Tooltip Background Color for the light variant.
- Legacy: Uses the original tooltip styling. Reveals Tooltip Text Color and Tooltip Background Color for the legacy variant.
Tooltip Trigger Default: Click
Determines how a tooltip opens.
- Click: Opens the tooltip when the visitor clicks the tooltip icon.
- Hover: Opens the tooltip when the visitor hovers the tooltip icon.
Tooltip Icon Size Supports: Responsive
The size of each tooltip icon, in pixels.
Tooltip Icon Color Default: 808080
The color of the tooltip icon shown next to feature text.
Tooltip Text Color Default: 333333
The text color used inside legacy tooltips. Applies when Tooltip Style is set to Legacy.
Tooltip Background Color
The background color used inside legacy tooltips. Applies when Tooltip Style is set to Legacy.
Tooltip Text Color (Dark Only) Default: ffffff
The text color used inside dark tooltips. Applies when Tooltip Style is set to Dark.
Tooltip Background Color (Dark Only) Default: 1f2937
The background color used inside dark tooltips. Applies when Tooltip Style is set to Dark.
Tooltip Text Color (Light Only) Default: 111111
The text color used inside light tooltips. Applies when Tooltip Style is set to Light.
Tooltip Background Color (Light Only) Default: ffffff
The background color used inside light tooltips. Applies when Tooltip Style is set to Light.
Toggle Price Button
This section is available when Enable Dual Billing? is set to Yes in the Pricing Boxes tab.
Toggle Price Button Settings
first_option Price Button Color Default: #d5d5d5; Supports: Field Connections
The background color of the toggle slider when the first billing option is active.
second_option Price Button Color Default: #919293; Supports: Field Connections
The background color of the toggle slider when the second billing option is active.
Toggle Price Label Color Default: 333333
The color of the labels shown on either side of the toggle.
Toggle Price Button Typography Supports: Responsive
The font settings for the toggle labels.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Billing Term Style
This section is available when Enable Dual Billing? is set to Yes in the Pricing Boxes tab.
Billing Term Style Settings
Price Term Color
The color applied to the billing term text shown next to each price.
Price Term Typography Supports: Responsive
The font settings for the billing term text shown next to each price.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Advanced tab​
The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.
See the Advanced tab section for more information.