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 › Large screen | 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" |
| Highlight plan › Make card highlighted | on |
| 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 › Highlight text 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 | Highlight plan › Make card highlighted + Highlighted card colors |
| Badge in the card corner | Highlight plan › Highlight text at = Top right / Top left 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 › Play 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. (331 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 or SVG code).
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, icon-text gap, placement (
play_button_at), and width mode (full width / actual width).
Highlight plan + Price filter
- Highlight plan: where the tag sits (above / next-to-name / corner) with its own style, background, text color, round corner, padding, and corner offsets; Make card highlighted unlocks per-element color overrides for the featured card.
- 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, border, round corner, and padding.
Tips & gotchas¶
Highlight needs two switches
A featured plan uses two separate toggles: Highlight this plan (to show the badge, which also needs Highlight text) and Make card highlighted (to apply the distinct card colors). Turn on both for the full effect.
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 fix
If a feature check icon looks slightly off against the text, use Align feature icon with text and the caution top-margin field sparingly to nudge it - it is a fine-tuning control, not an everyday setting.
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.