ModulesColumns
SR One Col Media 01
Renders a single flexible column with a top heading and description, paired with one media block (video, image, form, meeting scheduler, or lottie), plus a subheading, rich text, a repeater of icon feature blocks, and a repeater of CTA buttons within that column.
Pick this over sr-one-col-media-02 when the column itself needs a richer content stack, such as an embedded form, a meeting scheduler, a features list, or multiple CTAs, rather than a plain media and text split. Expect to supply the column media asset (video file, image, form, or meeting link) since the layout is built around exactly one media block per column.
Use cases
- Video with feature list and demo cta
- Embedded form with intro copy
- Meeting scheduler with heading and description
- Product feature block with icon list and buttons
- Lottie animation with supporting text and cta
Where it fits
- Included with: Stack
- Page sections: Content, Features, Form
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. |
| Use Image as Background | Boolean | Makes the Column's image the background. Requires media type to be IMAGE. |
| Column Vertical Align | Choice | Options: Auto, Top, Center, Bottom, Stretch. |
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 |
Column Repeats: default 1.
| Field | Type | Notes |
|---|---|---|
| Media Type | Choice | Options: Image, Video, Form, Meeting, Lottie, None. |
| Add to Lightbox | Boolean | Enable this toggle to add this image to a lightbox pop-up. |
| Overlay Color | Color | |
| Image | Image | |
| Media Corner Radius | Number | |
| Image Link | Link | |
| Banner Image | Boolean | |
| Banner Height | Number | |
| Full Width Image | Boolean | Stretch image to full width of the column. |
| Lottie Embed Code | Text | How to add LottieFiles. |
| Meeting | Meeting | |
| Content | 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. |
| Column Divider | Boolean | |
| Divider Color | Color | |
| Custom Column Size | Boolean | |
| CSS Class | Text | Assign a CLASS to the column. |
Column › 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 | |
| Play Button Color | Color | |
| Play Button Background Color | Color | |
| Autoplay | Boolean | |
| Loop | Boolean | |
| Muted | Boolean | |
| Video Accent | Choice | Add a design accent behind your video. Options: None, Design 1, Design 2, Design 3. |
| Video Accent Color | Choice | 11 options, including Primary, Secondary, Tertiary. |
| Custom Accent Color | Color |
Column › Video › Style Options
| Field | Type | Notes |
|---|---|---|
| Play button color | Color |
Column › Video › Placeholder text
| Field | Type | Notes |
|---|---|---|
| Video placeholder title | Text | |
| Video placeholder description | Text |
Column › Form
| Field | Type | Notes |
|---|---|---|
| Enabled | Boolean | |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
| Form | Form | |
| Send form notifications to specified email addresses instead of the form defaults | Boolean | |
| Email Addresses | ||
| Salesforce campaign | Salesforcecampaign |
Column › Form › Styles
| Field | Type | Notes |
|---|---|---|
| Background Color | Color | |
| 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 | |
| Hide Field Labels | Boolean |
Column › Form › Styles › Fields
| Field | Type | Notes |
|---|---|---|
| Style | Choice | Options: Default, Custom. |
| Height | Number | |
| Background Color | Color | |
| Border Color | Color | |
| Size | Number | |
| Radius | Number | |
| Focus | Color | |
| Field Color | Color | |
| Placeholder | Color |
Column › Form › Styles › Button
| Field | Type | Notes |
|---|---|---|
| Style | Choice | 25 options, including Primary, Secondary, Tertiary. |
| Size | Choice | Options: Small, Default, Large. |
| Align | Choice | Options: Auto, Left, Center, Right. |
| Full Width | Boolean |
Column › Form › Styles › Padding
| Field | Type | Notes |
|---|---|---|
| Top | Number | |
| Bottom | Number | |
| Left | Number | |
| Right | Number |
Column › Form › Styles › Border
| Field | Type | Notes |
|---|---|---|
| Style | Choice | Options: Gradient One, Gradient Two, None, Solid, Dotted, Dashed, Double. |
| Color | Color | |
| Width | Number | |
| Radius | Number | |
| Top | Boolean | |
| Bottom | Boolean | |
| Left | Boolean | |
| Right | Boolean |
Column › Form › Styles › Shadow
| Field | Type | Notes |
|---|---|---|
| Shadow | Boolean | |
| Horizontal | Number | A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. |
| Vertical | Number | The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box. |
| Blur | Number | The blur radius. The higher the number, the more blurred the shadow will be. |
| Spread | Number | The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. |
| Inset | Boolean | Changes the shadow to an inner shadow. |
| Color | Color | The color of the shadow. |
Column › Form › Heading Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Heading Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Heading Display Size | Choice | Size that heading is displayed at. 12 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. |
| CSS Class | Text |
Column › Heading Repeats: min 0, default 0.
| 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 |
Column › Features Repeats: default 0.
| Field | Type | Notes |
|---|---|---|
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
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 › Features › Heading Repeats: 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 |
Column › CTA Repeats: min 0, default 0.
| 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 |
Column › CTA › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
Column › CTA › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Column › 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. |
Column › Column Size Repeats: min 1, max 4, default 1. Columns follow a twelve column grid.
| Field | Type | Notes |
|---|---|---|
| Column Breakpoint | Choice | Options: None, Mobile, Tablet, Desktop, XL. |
| Column Width | Choice | 12 options, including 1, 2, 3. |
| Column Offset | Choice | 13 options, including 0, 1, 2. |
| Column Order | Number |
Style tab
Change log
| Version | Change |
|---|---|
| 8.0.5 | Synced current Stardust module source |
| 8.0.4 | Fixed form embed version |
| 8.0.3 | Fixed featured heading custom color visibility |
| 8.0.2 | Fixed column text color bug |
| 8.0.1 | Lottie js fix |
| 8.0.0 | Stardust update |
| 7.3.4 | Deprecated ability to set custom button styles |
| 7.3.3 | Added ability to set custom button styles |
| 7.3.2 | Added ability to use new HS form |
| 7.3.1 | Column breakpoint fix |
| 7.3.0 | Accessibility improvements |
| 7.2.1 | Updated lottie js |
| 7.2.0 | Added responsive background options |
| 7.1.0 | Introduced a lazy loading feature for forms |
| 7.0.1 | Added new Link options |
| 7.0.0 | Added columns styles, Added form media option, Removed jQuery dependencies |
| 6.0.2 | Removed column image link when image is used as background |
| 6.0.1 | Fixed video playing issues when design 2 is selected |
SR One Col Features 01
This module renders a single-column intro heading and description followed by a stacked list of up to 6 feature cards, each with an image, its own subheading, description, and optional link, all in one full-width column rather than a grid of side-by-side columns.
SR One Col Media 02
Renders a heading and description above one or more media columns (default two), each column holding an image, video, form, or lottie animation plus its own subheading, rich text, and a CTA button.