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.
Pick it over sr-hero-02 when the image panel should stay a smaller side column rather than an equally wide carousel, and pick it over sr-hero-01 or sr-hero-04 when you need multiple rotating product shots instead of one background image or video. It expects at least one slide image to fill the right column, and the column widths shift to full width if all slides are removed.
Use cases
- Product screenshot slideshow next to headline
- App feature carousel with cta buttons
- Landing page intro with rotating product shots
- Two-column hero with small image slider
- Software homepage banner with cta and mockups
Where it fits
- Included with: PRO
- 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 3.
| 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 | |
| Dot Color (Default) | Color |
Features › Features Repeats: default 0.
| 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: 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.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 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.
SR Hero 04
This hero renders a single centered content block with a heading, rich text description, and an unlimited set of CTA buttons stacked over a full-bleed image, video, gradient, or color background, with optional parallax scroll on the background itself.