SR Offer Parallax 02
This module renders a two-column layout with a parallax background image on one side and a shadowed content card on the other holding a heading, rich text description, and a single CTA button.
Pick this over Offer Parallax 01 when you want the image and content shown as two distinct side-by-side blocks rather than text layered directly on top of the image. It expects a parallax-ready image sized for one column, and works well when you want the card to visually touch and overlap the image edge on desktop.
Use cases
- Split image and text offer
- Promo section with side image
- Product highlight with cta
- Two column feature callout
- Offer card beside parallax photo
Where it fits
- Included with: Stack
- Page sections: CTA, Hero, Content
Editable fields
Content tab
| Field | Type | Notes |
|---|---|---|
| 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. |
| Parallax Image | Image | Recommended size: 2880x1920px. |
Heading Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Color | Color | |
| Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
CTA Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| CTA Type | Choice | Options: HubSpot CTA, HubSpot Payment, Button, Modal. |
| CTA Style | Choice | 26 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. |
| Add icon | Boolean |
CTA › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
CTA › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
CTA › Icon
| Field | Type | Notes |
|---|---|---|
| Icon | Icon | |
| Position | Choice | Options: Left, Right. |
| 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. |
Style tab
Change log
| Version | Change |
|---|---|
| 4.0.0 | Stardust update |
| 3.1.0 | Updated styles dependency |
| 3.0.2 | Fixed the accent background on mobile |
| 3.0.1 | Added new Link options |
| 3.0.0 | Remove jQuery |
SR Offer Parallax 01
This module renders one heading, a rich text description, and a single call to action button, all placed inside a styled card that floats centered on top of a full-bleed parallax background image.
SR Offer Slide In 01
This module renders a slide-in panel fixed to the viewport edge with a show or hide toggle button, a bling image, heading, rich text description, CTA buttons, and an embedded HubSpot form arranged in two columns.