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.

Pick it over Hero 01-03 when you want one plain centered column with no slider and no split image panel, and over Hero 01 when you want the parallax effect applied to the whole background rather than a small floating graphic. It works best with a short heading and one or two CTAs since there is no separate media slot beyond the background.

Use cases

Campaign landing page banner
Full-bleed video intro
Centered headline with two buttons
Gradient background intro section
Product launch announcement hero

Where it fits

Included with: PRO
Page sections: Hero, Cta

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 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

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
5.0.0	Stardust update
4.3.0	Accessibility improvements
4.2.0	Added responsive background options
4.1.5	Custom Button Style fields
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