SR Two Col 10
This module renders a full-height media column (image or video) beside a content column that holds a heading, rich text description, and one CTA button, with the media side switchable to left or right.
Unlike the other two-col modules, the content column can also carry its own secondary media, an image, video, or lottie animation, placed above the heading and copy. Use it when a section needs one large side visual plus a smaller inline graphic or animation next to the text, rather than just a plain image and copy pairing.
Use cases
- Product shot with inline demo animation
- Hero-style split with supporting video snippet
- Feature callout with icon animation above the copy
- Testimonial visual with lottie accent
- Big lifestyle photo next to text with a small explainer clip
Where it fits
- Included with: Free
- Page sections: Content, Features, Media
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. |
| Column Order | Choice | Options: Media / Content, Content / Media. |
Media Repeats: min 1, max 1, default 1.
| Field | Type | Notes |
|---|---|---|
| Media Type | Choice | Options: Image, Video. |
| Image | Image |
Media › Video
| Field | Type | Notes |
|---|---|---|
| Video type | Choice | Options: Embed, HTML Video, HubSpot Video. |
| HubSpot Video | Video player | |
| Embed | Embed | |
| Custom Thumbnail | Image | |
| Video File | File | Repeats: default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers. |
| Video Poster | Image | |
| Show Controls | Boolean | |
| Autoplay | Boolean | |
| Loop | Boolean | |
| Muted | Boolean |
Media › Video › Style Options
| Field | Type | Notes |
|---|---|---|
| Play button color | Color |
Media › Video › Placeholder text
| Field | Type | Notes |
|---|---|---|
| Video placeholder title | Text | |
| Video placeholder description | Text |
Content Repeats: min 1, max 1, default 1.
| Field | Type | Notes |
|---|---|---|
| Media Type | Choice | Options: Image, Video, Lottie, None. |
| Image | Image | |
| Lottie Embed Code | Text | Set the width to 100% and remove the height. |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the content text larger. |
| Text Align | Choice | Options: Auto, Left, Center, Right. |
| Text Color | Choice | 14 options, including Auto, Primary, Secondary. |
Content › Video
| Field | Type | Notes |
|---|---|---|
| Video type | Choice | Options: Embed, HTML Video, HubSpot Video. |
| HubSpot Video | Video player | |
| Embed | Embed | |
| Custom Thumbnail | Image | |
| Video File | File | Repeats: default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers. |
| Video Poster | Image | |
| Show Controls | Boolean | |
| Autoplay | Boolean | |
| Loop | Boolean | |
| Muted | Boolean |
Content › Video › Style Options
| Field | Type | Notes |
|---|---|---|
| Play button color | Color |
Content › Video › Placeholder text
| Field | Type | Notes |
|---|---|---|
| Video placeholder title | Text | |
| Video placeholder description | Text |
Content › Heading Repeats: min 0, default 2.
| 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 |
Content › 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 |
Content › CTA › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
Content › CTA › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Content › 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 |
|---|---|
| 2.0.0 | Stardust update |
| 1.2.0 | Accessibility improvements |
| 1.1.1 | Updated lottie js |
| 1.1.0 | Added responsive background options |
| 1.0.5 | Fixed module order |
| 1.0.4 | Added new Link options |
| 1.0.3 | Removed column image link when image is used as background |
| 1.0.2 | Added alignment option |
| 1.0.1 | Removed unused fields |
SR Two Col 08
This module renders a shared heading and description above two fixed-width card columns, each with its own image, small heading, description text, and one CTA button, where each card carries its own gradient, solid color, or custom background with white text by default.
SR Two Col Features 01
Renders an optional heading and description above a grid of feature cards, each with an image, a swap-on-hover image, a heading, rich text, and an optional link.