Pricing¶
A responsive grid of pricing plan cards: icon, plan name, price (with prefix/suffix), caption, feature list, button, and note, with an optional monthly/annual toggle. Best for: pricing pages, plan/tier comparison sections, subscription and SaaS package grids.
📷 Hero image
Target file: assets/img/pricing/hero.webp
A three-column grid of pricing plan cards on a Light background, each card showing a plan name, a large price with a currency prefix and a /month suffix, a caption, a check-marked feature list, and a button. Highlight the middle card with a "Most popular" badge and a distinct treatment using the Primary color so it stands out from its neighbors. Keep the cards bordered, rounded, and evenly sized. Captured at desktop width.
At a glance¶
Pricing Plans Monthly/annual
- What it does: renders a column-based grid of pricing plans. Each plan has an optional icon, name, price with prefix and suffix, a caption, a check-marked feature list, a button, and a note. Any plan can be highlighted, and an optional monthly/annual toggle switches prices, button labels, and links.
- Best used for: a pricing page, a tier comparison, or a SaaS package grid with a featured plan.
- Not the right fit if: you need plain content cards without prices (use Content Card) or a simple feature list without plans (use Features).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Pricing.
- Drag it where you want the plan grid.
- Open Click to update content › Pricing cards and add each plan: Plan name, Price, Caption title, and List of features.
- Set each plan's Button (title + link) and, if wanted, turn on Highlight this plan.
- To offer both billing periods, turn on Add filter on pricing card and fill in the annual price, link, and button title per plan.
- Set the grid under Layout settings › Columns and style cards under the Card group.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Bordered cards with icon, name, price, features, and button.
📷 Result
Target file: recipe-standard-3-up-grid-default.webp
Three evenly sized bordered plan cards in a row, each with an icon, plan name, large price, check-marked feature list, and a button, with a light shadow on a Light background.
| Field | Set to |
|---|---|
| Layout settings › Columns › Desktop | 3 |
| Card › Make a card | on |
| Card › Border › Show border | on |
| Card › Shadow › Card shadow | light-shadow |
One card highlighted with a badge and its own colors.
📷 Result
Target file: recipe-featured-plan.webp
Three plan cards where the middle one is visibly featured with a "Most popular" badge next to its name and a distinct treatment in the Primary color, lifting it above the two plainer cards.
| Field | Set to |
|---|---|
| Pricing cards › Highlight this plan | on |
| Pricing cards › Highlight text | e.g. "Most popular" |
| Highlighted card settings › Highlight plan › Highlight text at | next_to_plan_name |
A billing switch with a discount tag on the annual option.
📷 Result
Target file: recipe-monthly-annual-toggle.webp
A monthly/annual toggle switch centered above the plan grid, with a small discount tag such as "Save 20%" beside the annual option. Show the plans below reflecting the selected billing period.
| Field | Set to |
|---|---|
| Content › Add filter on pricing card | on |
| Filter label › Show discount on annual purchase? | on |
| Filter label › Discount text | e.g. "Save 20%" |
| Pricing cards › Annual price / Annual price link | your annual values |
The highlight tag pinned to a card corner.
📷 Result
Target file: recipe-corner-badge-plans.webp
A plan card with its highlight tag pinned to the top-right corner as a small badge filled in the Primary color, overlapping the card edge.
| Field | Set to |
|---|---|
| Pricing cards › Highlight this plan | on |
| Highlight plan › Highlight text at | top_right_corner |
| Highlight plan › Background | bg-primary |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Monthly/annual price switch | Content › Add filter on pricing card (+ Annual price / link / button title) |
| Show a discount badge on annual | Filter label › Show discount on annual purchase? + Discount text |
| Feature one plan | Pricing cards › Highlight this plan + Highlight text |
| Give the featured plan its own colors | Highlighted card settings, all of it |
| Badge in the card corner | Highlighted card settings › Highlight plan › Highlight text at = Top right corner |
| Add a currency symbol | Pricing cards › Add prefix for price (+ Prefix) |
| Add a /month suffix | Pricing cards › Add suffix for price (+ Suffix) |
| Glass card look | Card › Background = custom transparent color + Add blur in background |
| Rule under the price | Divider line › Divider line at = Under the price |
| Move the button to the top | Plan button › Plan button at = Under the price / caption |
| Button hugs its label | Plan button › Show plan button as = actual_width |
| 3-up desktop / 2-up tablet / 1-up mobile | Layout › Columns = 3 / 2 / 1 |
| Custom feature check icon | Content › Features icon › Choose icon from = svg_code |
| Per-card icon | Pricing cards › Icon type (HubSpot / image / SVG) |
Field reference¶
The editor is organized into a Content tab and a Style tab. Full field lists are grouped exactly as they appear in HubSpot. (335 fields total - expand each group as needed.)
Content tab¶
Click to update content
- Add filter on pricing card: enables the monthly/annual toggle, revealing Filter label (monthly/annual names, optional discount tag + text).
- Pricing cards (repeater): highlight toggle + text, icon type (none / HubSpot / upload / SVG), plan name, price + optional annual price, prefix/suffix toggles, caption title, List of features repeater, Button (style, title, annual title, link, annual link, optional icon), and a plan note.
- Features icon: shared check-icon source (HubSpot icon, default Star, or SVG code). One icon serves every feature row on every card.
Section background settings + Drag to section name + Developer
- Section background:
none/color/image/video(Style tab adds overlay, position, blur, parallax, and dual radial glows). - Drag to section name: custom section ID for scroll-to-section links.
- Developer use only: per-module custom CSS field.
Style tab¶
Color scheme
| Field | Options | Default |
|---|---|---|
| Color scheme | light / dark | light |
Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.
Section divider settings
Divider type: none / shape / border / shadow.
- Border divider: from top/bottom/both, width, color (default Tertiary).
- Shadow divider: regular/light/dark/custom shadow with x/y/blur/spread/color.
- Shape divider: 25 shapes, top/bottom/both, flip/invert, color or gradient, responsive heights.
Section spacing settings
| Field | Options | Default |
|---|---|---|
| Top | top-y-0 to top-4xl | top-2xl |
| Bottom | bottom-y-0 to bottom-4xl | bottom-2xl |
| Left | left-x-0 / left-m / left-l / left-xl | left-m |
| Right | right-x-0 / right-m / right-l / right-xl | right-m |
Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).
Layout settings
- Columns: per breakpoint (default 3 / 2 / 1).
- Gap between column: per breakpoint (default 24 each).
- Section wrapper container and Inner content container: independent width caps + block alignment.
Card
Wrap each plan in a card (on by default):
- Alignment › Content alignment: left / right / center.
- Background: token / gradient / custom color / custom gradient, plus Add blur in background (glass).
- Border: on by default, with width and token/custom color.
- Card padding: responsive (desktop / tablet / mobile).
- Shadow: none / light / regular / dark (default
light-shadow). - Round corner:
round-0toround-xxl(defaultround-s).
Preset Settings (per element)
- Plan icon: size, color, spacing.
- Plan name: heading tag / typo / custom size, color, bold, spacing, transform.
- Plan price: price + prefix + suffix each with their own tag style and color; vertical alignment and gap between the three.
- Plan caption title / Plan features / Plan note: tag style, color, spacing (features add spacing between rows, icon size, icon color, and an alignment fix).
- Divider line: optional rule under the price, caption, or features with color, height, and spacing.
- Plan button: spacing, placement (
play_button_at), and width mode (full width / actual width). Any plan button set to the Simple Link style switches to its own color, underline, bold and icon controls; the other seven skins share a size and an icon-text gap.
Highlight plan + Price filter
- Highlight plan: lives inside Highlighted card settings. Where the tag sits (above / next-to-name / corner) with its own style, background, text color, letter spacing, round corner, padding, and corner offsets. The rest of that group carries the featured card's own background, border, shadow, padding, and per-element colors.
- Price filter: style, color, alignment, gaps, a fully styled Toggle switch (track + thumb colors and round corners), and a Discount text tag with background, text, letter spacing, border, round corner, and padding.
Tips & gotchas¶
One switch drives the featured plan
Highlight this plan on a card is the only toggle. It applies the Highlighted card settings to that card and renders its badge, which also needs Highlight text. There is no second switch to find.
Annual values are per plan
The monthly/annual toggle only switches values you actually fill in. Set Annual price, Annual price link, and Annual price button title on each plan, or that plan will look empty on the annual view.
Feature icon alignment
If a feature runs onto two lines, the check icon centres against the whole block rather than the first line. Set Plan features › Icon & text alignment to Top to pin it to the first line.
Frequently asked questions¶
Can more than one plan be highlighted at the same time?
Nothing stops you from turning on Highlight this plan on several cards, since it's an independent switch on each card. Turn it on for one plan at a time to keep the "featured" treatment meaningful.
Do I need to turn on a separate \"Make card highlighted\" switch?
No. That was an older control and no longer exists. Highlight this plan is the one switch: it applies the Highlighted card settings and shows the badge once Highlight text is set.
Is there a minimum or maximum number of pricing cards?
At least 1 plan is required, and there's no maximum. List of features inside each plan is unlimited too.
Do all plans need the same number of features listed?
No. List of features is its own repeater on each pricing card, so one plan can list 3 features and another 8 without affecting the rest of the grid.
Related modules¶
- Content Card: plain content cards when there are no prices to show.
- Features: a simple feature list without per-plan pricing.
- Call to Action: a closing CTA band to place under the plans.