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.
Pick it over sr-footer-03 and sr-footer-04 when the site nav has grouped sub-links needing two levels of hierarchy, and pick it over sr-footer-02 when you want a plain heading line and independent column and alignment controls for logo, menu, and menu text rather than card-style multi-column grouping with a CTA. It needs a HubSpot menu tree with parent and child items to look right, since a flat one-tier menu will render sparse in this layout.
Use cases
- Footer with grouped nested links
- Multi-level site nav in footer
- Logo plus heading and social icons footer
- Footer with back-to-top button
- Two-tier dropdown style footer menu
Where it fits
- Included with: PRO
- Page sections: Footer
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. |
| Logo | Image | |
| Logo Link | Link | |
| Menu | Menu | |
| Copyright | Rich text | |
| Enable Back To Top Button | Boolean |
Slogan Repeats: min 0, default 0.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Size | Choice | Options: H1, H2, H3, H4, H5, H6, P. |
| Display Size | Choice | 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 |
Social Icons Repeats: min 0, default 0.
| Field | Type | Notes |
|---|---|---|
| Type | Choice | Options: Icon, Image. |
| Icon | Icon | |
| Custom Icon | Image | |
| Link | Link | |
| Aria Label | Text | The aria-label attribute is used on links that have no accessible name to give it meaning to screen readers. |
| Background Color | Color | |
| Icon Color | Color | |
| 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. |
Back To Top Button
| Field | Type | Notes |
|---|---|---|
| Button Color | Choice | 12 options, including Primary, Secondary, Tertiary. |
| Button Color | Color | |
| Icon | Icon | |
| Icon Color | Choice | 12 options, including Primary, Secondary, Tertiary. |
| Icon Color | Color | |
| Page Target | Text | |
| 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 |
|---|---|
| 7.0.1 | Fixed icon color issue |
| 7.0.0 | Stardust update |
| 6.2.0 | Multi-column layout mobile fix |
| 6.2.0 | Accessibility improvements |
| 6.1.1 | Added responsive background options |
| 6.0.1 | Added aria label to social media links |
| 6.0.0 | Converted to Non-global module |
| 5.1.1 | Added image option to social icons |
| 5.1.0 | Fixed layout issues |
| 5.0.3 | Social Icons Color Fixes |
| 5.0.2 | Footer Improvements |
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.
SR Footer 02
This footer renders a logo with optional link, a rich text intro paragraph, an optional CTA button beside the logo, and up to two nested menu items shown as card-style columns with their child links listed underneath, plus copyright text, up to five social icons, and an optional back-to-top button.