SR Hero 404
Renders a single centered hero block with one heading, an optional rich text description, and one call-to-action button over an optional image, video, or gradient background.
Pick it over sr-hero-01 through sr-hero-04 when the page is a 404 not-found error rather than a marketing or homepage intro, since there is no slider, no parallax image panel, and only a single button slot instead of up to two or unlimited CTAs. It expects short apology or error copy and defaults to a 'Page not found' heading with a 'Return Home' button, so keep the message brief and the action singular.
Use cases
- 404 error page
- Page not found message
- Broken link landing page
- Missing content fallback page
- Site error return-home screen
Where it fits
- Included with: Free
- Page sections: Hero, Utility
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 |
|---|---|
| 6.0.0 | Stardust update |
| 5.3.0 | Accessibility improvements |
| 5.2.0 | Added responsive background options |
| 5.1.5 | Custom button style fields |
| 5.1.4 | Hero parallax minor fix |
| 5.1.3 | Added new Link options |
| 5.1.2 | Added conditionals to not show the top bottom padding when height option is selected |
| 5.1.1 | Spacing bug fix |
| 5.1.0 | Remove jQuery |
| 5.0.3 | Minor Padding issue fixes |
| 5.0.2 | Fixed text disappearing when image background is used |
| 5.0.1 | Fixed Default values |
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.
SR Hero 500
This hero renders a single centered heading, an optional rich text description, and one call-to-action button, with no image or video background option.