Docs / Data & Pricing / Pricing Table
A responsive pricing section with 2-4 plan cards, an optional monthly/yearly billing toggle, repeatable feature lists, and a highlighted "popular" plan. Use it for SaaS pricing pages, service tiers, or membership comparisons.
The most-used controls live at the top: heading visibility and alignment, how many plans to show, and the monthly/yearly billing toggle. Editors can shape the pricing layout here without touching styling.
Controls whether the section heading area (badge h6, title h2, description p) appears above the plan cards. Turn it off when the section follows a stronger heading from the row above and you want the cards to read as a continuation.
Text alignment for the heading area on desktop (993px and above).
left Left-alignedcenter Centered (default)right Right-alignedText alignment for the heading area on mobile devices (below 768px). Set independently from desktop so editors can center on phones while keeping desktop left-aligned.
Caps the width of the heading area so long titles and descriptions don't stretch edge-to-edge on wide screens. Set to 0 for no max width (heading fills the container).
How many pricing plan cards to display. Plans 3 and 4 are only rendered when the count requires them, so editors can leave their content populated without it appearing on the page.
2 Two plans (Plan 1 + Plan 2)3 Three plans (default)4 Four plansShows or hides the monthly/yearly billing period switcher above the plan cards. When off, only the monthly price is rendered and the yearly price + suffix fields are ignored.
Label for the monthly billing tab on the toggle. Keep it short (1-2 words) so the toggle pill stays compact.
Label for the yearly billing tab on the toggle. Common alternatives: "Annual", "Yearly (save 20%)".
Which billing period is selected by default when the page first loads.
monthly Monthly (default)yearly YearlyThe section heading, the entrance animation, and the four plan groups. Each plan has its own pricing, features, button, and "highlighted" flag.
The badge + title + description block above the plan cards. The default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.
Triggers an IntersectionObserver-driven fade when the section scrolls into view.
none No animation (default)fade-up Fade Up (slides up from below)fade-down Fade Down (slides down from above)fade-left Fade from Leftfade-right Fade from Rightfade Fade Only (no slide)Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.
The first plan card. Always visible regardless of Number of Plans setting.
Displayed as the plan badge label at the top of the card.
Price shown when monthly billing is selected. Include the currency symbol (e.g. $29, £19, €25). Free plans typically use $0 or "Free".
Price shown when yearly billing is selected. Common pattern: 10-20% discount vs 12 months of monthly pricing.
Small text rendered below the monthly price (e.g. "per month", "per user/month"). Leave empty to hide the suffix entirely.
Small text rendered below the yearly price (e.g. "per year", "billed annually"). Leave empty to hide.
Applies the highlighted/"popular" styling to the card (different background color, optional accent). Only one plan should typically be highlighted per section.
Repeating list of feature lines for the plan. Each item exposes a single text field:
feature_text Feature: the line of feature copy (default "Up to 3 team members")Editors can add up to 20 features per plan via the "Add" button in the editor; the checkmark icon is rendered automatically.
CTA button copy at the bottom of the card. Keep it action-oriented (2-3 words).
Destination for the plan's CTA button. Supports external URLs, HubSpot content pages, files, email addresses, and blog posts. Each link has its own "Open in new tab" and "No-follow" toggles.
Button tier pulled from the theme's CTA settings. Mix styles across plans (e.g. Secondary on entry tiers, Primary on the highlighted plan) to draw the eye to the recommended choice.
cta-primary Primary (default)cta-secondary Secondarycta-tertiary Tertiarycta-four Fourcta-five Fivecta-six SixThe second plan card. Always visible regardless of Number of Plans setting. Same field schema as Plan 1 with different defaults.
Displayed as the plan badge label at the top of the card.
Price shown when monthly billing is selected.
Price shown when yearly billing is selected.
Small text below the monthly price. Leave empty to hide.
Small text below the yearly price. Leave empty to hide.
Applies highlighted styling to the card.
Repeating list of feature lines. Each item exposes a single text field:
feature_text Feature: the line of feature copy (default "Everything in Starter")CTA button copy at the bottom of the card.
Destination for the plan's CTA button. Supports external URLs, HubSpot pages, files, email addresses, and blog posts.
Button tier from theme CTA settings. Same six choices as Plan 1: cta-primary, cta-secondary, cta-tertiary, cta-four, cta-five, cta-six.
The third plan card. Only rendered when Number of Plans is set to 3 or 4. Same field schema as Plan 1 with different defaults; this plan ships with the Highlight flag enabled by default.
The entire Plan 3 group only appears in the editor (and renders on the page) when Number of Plans matches the regex 3|4. The individual fields below are always visible inside the Plan 3 group when the group is shown.
Displayed as the plan badge label at the top of the card.
Price shown when monthly billing is selected.
Price shown when yearly billing is selected.
Small text below the monthly price. Leave empty to hide.
Small text below the yearly price. Leave empty to hide.
Plan 3 is the highlighted plan by default, which is why it ships with this toggle on. Disable it if you want a different plan to be the visual focal point.
Repeating list of feature lines. Each item exposes a single text field:
feature_text Feature: the line of feature copy (default "Everything in Professional")CTA button copy. Enterprise tiers commonly use "Contact Sales" or "Talk to Us" rather than self-serve "Get Started".
Destination for the CTA. Supports external URLs, HubSpot pages, files, email addresses, and blog posts.
Button tier from theme CTA settings. Same six choices as Plan 1.
The fourth plan card. Only rendered when Number of Plans is set to 4. Same field schema as Plan 1 with different defaults.
The entire Plan 4 group only appears in the editor (and renders on the page) when Number of Plans equals 4.
Displayed as the plan badge label at the top of the card.
Price shown when monthly billing is selected.
Price shown when yearly billing is selected.
Small text below the monthly price. Leave empty to hide.
Small text below the yearly price. Leave empty to hide.
Applies highlighted styling to the card.
Repeating list of feature lines. Each item exposes a single text field:
feature_text Feature: the line of feature copy (default "Everything in Enterprise")CTA button copy at the bottom of the card.
Destination for the CTA. Supports external URLs, HubSpot pages, files, email addresses, and blog posts.
Button tier from theme CTA settings. Same six choices as Plan 1.
Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.
Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #pricing) and JS targeting.
Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.
Everything visual: card colors and border radius, the billing toggle tabs, the plan name badge, the section heading badge, dividers, and the row's background, width, and spacing.
Card-level styling: backgrounds, borders, radius, and the colors used for price text, suffix text, feature text, checkmarks, and the price/features divider.
Background color for non-highlighted plan cards.
Background color used for plans with the "Highlight This Plan" toggle on.
Border color around plan cards. The default is a very low-opacity dark color so the card edge reads as a subtle line on white backgrounds.
Rounded corner radius for plan cards. 12px matches the theme's default tile rounding; raise to 20+ for a softer, more modern feel.
Color of the large price text on each card.
Color of the smaller suffix text below the price (e.g. "per month").
Color of the feature list line text.
Color of the checkmark icon next to each feature line.
Color of the horizontal line between the price block and the features list inside each card.
Colors for the monthly/yearly billing toggle. Only relevant when Show Billing Toggle is on.
The entire Toggle Style group only appears in the editor when Show Billing Toggle (in Start Here) is on.
Background color of the toggle pill (the container around both tabs).
Background color of the currently-selected tab inside the toggle.
Text color for inactive tabs in the toggle.
Text color for the active tab in the toggle.
Colors for the plan name pill rendered at the top of each card (e.g. "Starter", "Professional"). This is a separate badge from the Section Heading badge below.
Background color of the plan name pill on each card.
Text color inside the plan name pill on each card.
Styling for the section heading's h6 element (rendered as a pill badge above the section title).
Styles the <h6> inside the section heading as a pill badge instead of a plain heading. The badge color/border are pulled from the chosen badge tier and the theme's badge settings.
Picks the badge tier. Colors are configured in Theme Settings > Badge.
badge-primary Primary (default)badge-secondary Secondarybadge-three Threebadge-four Fourbadge-five Fivebadge-six SixDecorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.
Decorative shape at the top of the section. The shape is rendered as an inline SVG matching the divider color you choose.
none No divider (default)wave-1 Wave 1 (Gentle)wave-2 Wave 2 (Sharp)wave-3 Wave 3 (Multi)wave-4 Wave 4 (Smooth)wave-5 Wave 5 (Layered)tilt Tilt (Angled)curve Curve (Arc)triangle TriangleSet this to match the background color of the section above so the divider blends into it.
Height of the top divider shape for wave, curve, and triangle dividers.
Height of the angled divider. Only used when the Top Divider is set to Tilt.
Mirrors the top divider shape horizontally.
Decorative shape at the bottom of the section. Same 9 shape options as the top divider: none, wave-1, wave-2, wave-3, wave-4, wave-5, tilt, curve, triangle.
Set this to match the background color of the section below so the divider blends into it.
Height of the bottom divider shape for wave, curve, and triangle dividers.
Height of the angled divider. Only used when the Bottom Divider is set to Tilt.
Mirrors the bottom divider shape horizontally.
Puts the bottom divider behind the section content so buttons remain clickable when the divider overlaps them.
The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.
The Background Type dropdown drives which sub-controls appear:
none No background (default; section inherits the page bg)color Solid Color - reveals Background Color pickergradient Gradient - reveals Top Color, Bottom Color, and 8 direction optionsimage Image - reveals Background Image, Size (cover/contain/original), Position (5-point), Overlay toggle, Overlay Color, Blur toggle, Blur amountNote: The "Background" group is labeled "Image, Video, Color, Etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.
standard Standard (uses theme's standard container width, set in Theme Settings > Layout)slim Slim (narrower variant, also set in Theme Settings)custom Custom - reveals a Custom Width number input (600-1920px, default 1200)Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:
desktop 100px top, 100px bottom, 0 left, 0 righttablet 60px top, 60px bottom, 0 left, 0 rightmobile 40px top, 40px bottom, 15px left, 15px right