SR Hero 02
This hero renders a two-column layout with a heading, rich text description, up to two CTA buttons on one side, and an image slider of unlimited slides with optional autoplay and dot navigation filling a full content column on the other.
Pick it over sr-hero-01 and sr-hero-04 when you need a dedicated rotating image carousel beside the text instead of a single background image or video, and choose it over sr-hero-03 when the slider should occupy a large main column rather than a small side panel limited to three slides. It expects at least one slide image to fill the slider column, otherwise the text content expands to full width.
Use cases
- Product screenshot carousel next to headline
- Rotating feature images beside intro copy
- Landing page with large image slideshow panel
- Multi-slide showcase with autoplay and dots
- Campaign intro with unlimited rotating visuals
Where it fits
- Included with: Core
- Page sections: Hero
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. |
| Height | Choice | Set to Auto to use the module's top and bottom padding values in the style tab. Options: Auto, Small, Medium, Large, Full. |
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 2.
| 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. |
Slides › Slides Repeats: default 1.
| Field | Type | Notes |
|---|---|---|
| Image | Image | Recommended size: 900x600px. |
| Image Corner Radius | Number |
Slides › Slider Options
| Field | Type | Notes |
|---|---|---|
| Autoplay | Boolean | |
| Autoplay Speed | Number | |
| Dots | Boolean | |
| Dot Color | Color |
Features
| Field | Type | Notes |
|---|---|---|
| Feature Section Background Color | Color |
Features › Features Repeats: default 3.
| Field | Type | Notes |
|---|---|---|
| Image | Image | Recommended size: 128x128px. |
| Content | Rich text |
Features › Feature Columns Repeats: min 1, max 4, default 1. Columns follow a twelve column grid.
| Field | Type | Notes |
|---|---|---|
| Columns | 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 |
Columns › Content 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 |
Columns › Slides 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 |
|---|---|
| 6.0.1 | Fixed column order issue |
| 6.0.0 | Stardust update |
| 5.2.1 | Column breakpoint fix |
| 5.2.0 | Accessibility improvements |
| 5.1.0 | Added responsive background options |
| 5.0.5 | Fixed background video regex with background image |
| 5.0.4 | Responsive padding fixes |
| 5.0.3 | Added new Link options |
| 5.0.2 | Added conditionals to not show the top bottom padding when height option is selected |
| 5.0.1 | Fixed height issues |
| 5.0.0 | Major rework |
SR Hero 01
Renders a full-bleed cover hero with a heading, rich text description, and up to two CTA buttons over a single background image or video.
SR Hero 03
This hero renders a two-column layout with a heading, rich text description, up to two CTA buttons on the left, and a fixed slider of up to three image slides on the right, with optional autoplay and dot navigation.