SR Hero Video 01
Renders a full-bleed hero with a heading, rich text description, and a single CTA button, set against a video or image background with optional parallax scroll.
Choose this over the other hero modules when the background media itself is the focal point and the CTA is framed around watching a video, such as a 'Watch the Video' button rather than a generic link. It expects a background video or image and works best full width, since the height defaults to full screen and the width can span the entire viewport.
Use cases
- Video background hero with watch button
- Full screen intro with autoplay video
- Parallax video welcome section
- Product demo teaser with cta
- Brand story hero with looping background video
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. |
| 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 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 |
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. |
Style tab
Change log
| Version | Change |
|---|---|
| 4.3.0 | Accessibility improvements |
| 4.2.0 | Added responsive background options |
| 4.1.2 | Added new Link options |
| 4.1.1 | Added conditionals to not show the top bottom padding when height option is selected |
| 4.1.0 | Remove jQuery |
| 4.0.1 | Minor Padding issue fixes |
SR Hero Two Col 01
This hero renders two independent side-by-side columns, each with its own media (image or video), heading, richtext description, and CTA buttons, with the left column holding one CTA and the right column holding two.
SR Footer 01
This footer renders a logo, a heading line above the menu, a nested two-level HubSpot menu with dropdown-style child links, copyright richtext, a row of up to several social icons, and an optional back-to-top button.