SR Pricing 03
This module renders a heading, optional description, an optional monthly/annual price toggle, and a row of exactly three pricing cards, each with a name, price, description, up to four features, and one or two buttons.
Pick it over SR Pricing 01 and 02 when you need exactly three plans side by side with a recommended badge and per-card background or gradient styling, rather than a full feature comparison table or a two-plan layout with a side column. Each card can carry its own colors and a secondary call to action, so it works well when one middle tier should stand out visually.
Use cases
- Three-tier pricing table
- Monthly vs annual toggle pricing
- Highlighted recommended plan card
- Saas pricing grid with gradient accent card
- Pricing cards with dual ctas
Where it fits
- Included with: Core
- Page sections: Pricing, CTA
Editable fields
Content tab
| Field | Type | Notes |
|---|---|---|
| Background Video | File | Repeats: min 0, default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers. |
| Background Video Tablet | File | Repeats: min 0, default 1. This background video will only be used on tablet devices. |
| Background Video Mobile | File | Repeats: min 0, default 1. This background video will only be used on mobile devices. |
| Enabled | Boolean | |
| ID | Text | Assign a ID to the module. |
| Class | Text | Assign a CLASS to the module. |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
| Show Price Toggle | Boolean | |
| Label 1 | Text | |
| Label 2 | Text | |
| Toggle Color | Color | |
| Toggle Bar Color | Color |
Heading Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Heading Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6. |
| Heading Display Size | Choice | Size that heading is displayed at. 11 options, including Auto, H1, H2. |
| Heading Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Heading Color | Color | |
| Heading Align | Choice | Options: Auto, Left, Center, Right. |
| Class | Text | Add a class to the module. |
Column Repeats: min 1, max 3, default 3.
| Field | Type | Notes |
|---|---|---|
| Recommended | Boolean | |
| Recommended Background Color | Color | |
| Recommended Text Color | Color | |
| Name | Text | |
| Price | Text | |
| Annual Price | Text | |
| Description | Rich text | |
| Enable Secondary Button | Boolean | |
| Background Option | Choice | For the Video option, return to the 🖉 Content tab to edit the video source. Options: Color, Custom, Gradient. |
| Background Gradient From | Color | |
| Background Gradient To | Color | |
| Background Color | Choice | 14 options, including Primary, Secondary, Tertiary. |
| Background Color | Color | For transparent images or before the image/video loads. |
| Text Color | Choice | Set to Auto to use the default text color. Set to Custom to set a custom text color. 15 options, including Auto, Primary, Secondary. |
| Text Color | Color |
Column › Features Repeats: default 4.
| Field | Type | Notes |
|---|---|---|
| Feature | Rich text |
Column › Features › Icon
| Field | Type | Notes |
|---|---|---|
| Icon Type | Choice | Options: Icon, Image, Custom, None. |
| Image | Image | |
| Icon | Icon | |
| Icon Color | Color | |
| Icon Background | Color | Set opacity to 0 to disable the background. |
| HTML | Text | |
| Icon Size | Number | |
| Purpose | Choice | The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic. |
Column › CTA Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| CTA Type | Choice | Options: HubSpot CTA, HubSpot Payment, Button, Modal. |
| CTA Style | Choice | 13 options, including Primary, Secondary, Tertiary. |
| CTA | CTA | |
| Button Text | Text | |
| Modal Target | Text | |
| Link | Link | |
| Payment link | Payment | |
| Checkout behavior | Choice | Options: Open in a new tab, Sliding overlay. |
| CTA Size | Choice | Options: Small, Default, Large. |
Column › CTA Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| CTA Type | Choice | Options: Button, Modal. |
| CTA Style | Choice | 13 options, including Primary, Secondary, Tertiary. |
| Button Text | Text | |
| Modal Target | Text | |
| Link | Link | |
| CTA Size | Choice | Options: Small, Default, Large. |
Style tab
Change log
| Version | Change |
|---|---|
| 2.0.1 | Added JS validation for pricing toggle |
| 2.0.0 | Stardust update |
| 1.2.1 | Fixed image macro |
| 1.2.0 | Accessibility improvements |
| 1.1.0 | Added responsive background options |
| 1.0.8 | Aligned the pricing cards at the top |
| 1.0.7 | Minor layout fixes |
| 1.0.6 | Removed min and max feature repeater limit |
| 1.0.5 | Fixed svg icon shrinking |
| 1.0.4 | Added new Link options |
| 1.0.3 | Added label text values to help users change the toggle texts |
| 1.0.2 | Added secondary button to pricing module to enable differentiation between annual and monthly CTAs |
SR Pricing 02
This module renders a two-column layout with an intro heading and description on the left, a secondary heading and description above the cards, and exactly two pricing cards on the right, each with a plan name, price, CTA button, and four feature list items.
SR Social Tweet 01
This module renders a single card with a heading, a rich text quote or message meant to be shared, and a row of up to 4 social icon links.