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.
Pick it over hero 02 and 03 because there is no slider, and over hero 04 because it supports an optional small decorative parallax image that floats above the background as the visitor scrolls, giving a lighter effect than hero 04's heavier background treatment. Works best with a single background asset and short parallax graphic rather than multiple images.
Use cases
- Homepage intro banner
- Landing page cover with parallax accent
- Product launch header
- Simple background video hero
- Single cta welcome banner
Where it fits
- Included with: Free
- 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. |
| Parallax | Boolean |
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. |
Parallax Scroll Image
| Field | Type | Notes |
|---|---|---|
| Image | Image | |
| Top | Number | |
| Left | Number | |
| Right | Number | |
| Width | Number | |
| Blur | Number |
Style tab
Change log
| Version | Change |
|---|---|
| 5.0.0 | Stardust update |
| 4.3.1 | Minor fixes to parallax |
| 4.3.0 | Accessibility improvements |
| 4.2.0 | Added responsive background options |
| 4.1.4 | Hero parallax minor fix |
| 4.1.3 | Added new Link options |
| 4.1.2 | Added conditionals to not show the top bottom padding when height option is selected |
| 4.1.1 | Fixed height issues |
| 4.1.0 | Remove jQuery |
| 4.0.2 | Minor Padding issue fixes |
| 4.0.1 | Fixed text disappearing when image backgroud is used |
SR Navigation 01
This renders the full site header with an optional top bar (announcement text or a menu), a logo, a multi-level menu with mega menu support, search, a language switcher, and a CTA button, all in one bar.
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.