The Pricing Table element is designed to display and compare different pricing plans for products or services. It helps users understand the features and costs associated with each plan, facilitating informed purchasing decisions.
Content Controls
Content
The controls in this section allow you to customize the core elements of your pricing table, such as the accent, icons, title, price details, description, features, and buttons.
- Accent – Toggle the accent feature on or off.
- Accent Text – Specify the text for the accent. Note: This control is only available when the Accent is enabled.
- Icon – Select an icon to display.
- Title – Enter the title for the pricing table.
- Price – Configure the pricing details.
- Before Price – Add text to appear before the price.
- Amount – Specify the main price amount.
- Per Period – Add a period label (e.g., per month).
- Currency Symbol – Specify the currency symbol.
- Fractional Amount – Add fractional pricing details.
- Badge – Add a badge to highlight specific pricing information.
- Description – Enter a description for the pricing plan.
- Features – List the features included in the plan.
- Text – Enter text for each feature.
- Not Included – Toggle to indicate features not included.
- Button – Configure the button settings.
- Text – Specify the button text.
- Link – Provide the URL for the button link.
- HTML Tags – Manage HTML tags for the pricing table elements.
- Title – Select the HTML tag for the title.
Design Controls
Container
The controls in this section allow you to customize the overall appearance of the pricing table container, including background, width, alignment, padding, borders, and shadow.
- Background – Set the background color of the container.
- Width – Define the width of the container.
- Content Alignment – Adjust the alignment of the content within the container.
- Padding – Configure the padding inside the container.
- Padding – Set specific padding values.
- Borders – Customize the border settings.
- Radius – Set the border-radius.
- Styling – Adjust the border style.
- Shadow – Add a shadow effect to the container.
Accent
The controls in this section allow you to customize the accent features, including padding, color, border radius, border width, and typography.
- Padding – Configure the padding for the accent area.
- Color – Choose the color for the accent.
- Label Radius – Set the border radius for the accent label.
- Border Width – Define the border width for the accent.
- Typography – Adjust the typography settings for the accent text.
Icon
The controls in this section allow you to customize the appearance of icons, including color and size.
- Color – Set the color of the icon. Note: This control is only available when an icon is set.
- Size – Adjust the size of the icon.
Price
The controls in this section allow you to customize the price display, including position, amount details, badge settings, and nudging elements.
- Position – Set the price position within the container.
- Amount – Configure the amount display settings.
- Period Position – Adjust the position of the period label.
- Currency Position – Adjust the position of the currency symbol.
- Badge – Customize the badge settings for the price.
- Padding – Configure the padding for the badge.
- Color – Choose the color for the badge.
- Border Radius – Set the border radius for the badge.
- Typography – Adjust the typography settings for the badge.
- Nudge – Fine-tune the position of various price elements.
- Currency X – Adjust the horizontal position of the currency symbol.
- Currency Y – Adjust the vertical position of the currency symbol.
- Period X – Adjust the horizontal position of the period label.
- Period Y – Adjust the vertical position of the period label.
- Fraction X – Adjust the horizontal position of the fractional amount.
- Fraction Y – Adjust the vertical position of the fractional amount.
Features
The controls in this section allow you to customize the appearance and layout of the features list, including alignment, icon settings, spacing, and text indentation.
- Force Left Alignment – Toggle to force left alignment of the features list.
- Icons – Configure icon settings for the features list.
- Icon Size – Adjust the size of the icons.
- Included Color – Set the color for included features.
- Excluded Color – Set the color for excluded features.
- Background – Toggle to add a background to the icons.
- Included Icon – Choose the color for the Included Icon. Note: This control is only available when the background is enabled.
- Excluded Icon – Choose the color for Excluded Icon. Note: This control is only available when the background is enabled.
- Padding – Configure the padding for the icons. Note: This control is only available when the background is enabled.
- Radius – Set the border radius for the icons. Note: This control is only available when the background is enabled.
- Custom Icons – Configure custom icons for included and not included features.
- Included Icon – Select a custom icon for included features.
- Not Included Icon – Select a custom icon for features that are not included.
- Nudge – Fine-tune the position of the icons.
- Icon Y Nudge – Adjust the vertical position of the icons.
- Icon X Nudge – Adjust the horizontal position of the icons.
- Text Indent – Adjust the indentation of the feature text.
- Space Between Items – Set the spacing between feature items.
Button
The controls in this section allow you to customize the button styles, text, icons, and effects for the pricing table.
- Style – Choose the style of the button.
- Text – Configure the text settings for the button. Note: This control is only available when the button style is set to text.
Typography
The controls in this section allow you to customize the typography settings for various elements in the pricing table, including title, label, price details, description, and features.
- Title – Adjust the typography settings for the title.
- Label – Adjust the typography settings for the label.
- Price – Configure the typography settings for the price.
- Before Price – Adjust the typography for the text before the price.
- Price – Adjust the main price typography.
- Currency – Set the typography for the currency symbol.
- Fractional Part – Adjust the typography for the fractional part of the price.
- Period – Set the typography for the period label.
- Description – Adjust the typography for the description text.
- Features – Customize the typography for the features list.
Spacing
The controls in this section allow you to manage the spacing around different elements of the pricing table, such as icons, title, price area, description, and features.
- After Icon – Set the space after the icon.
- After Title – Set the space after the title.
- After Price Area – Set the space after the price area.
- After Description – Set the space after the description.
- After Features – Set the space after the features list.
- Price Area – Configure the spacing within the price area.
- Before Amount – Set the space before the amount in the price area.
- Amount / Period – Adjust the spacing between amount and period labels.
- Before Badge – Set the space before the badge in the price area.
- Wrapper – Manage the margin settings for the wrapper.
- Margin Top – Set the top margin of the wrapper.
- Margin Bottom – Set the bottom margin of the wrapper.