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.

Pick it over sr-footer-03 and sr-footer-04 when the nav has grouped sub-links that should appear as two-tier card columns rather than a flat list, and pick it over sr-footer-01 when you want a CTA button next to the logo and description instead of just a heading line. It expects a HubSpot menu with at least two parent items that each have children, otherwise the card columns will look empty.

Use cases

Site footer with grouped sub-links
Footer cta next to logo
Two-column card style footer nav
Footer with intro paragraph and social icons
Footer with back to top control

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	Recommended size: 440x100px.
Logo Link	Link
Content	Rich text
Lead Text	Boolean	Turn on to make the Description text larger.
Menu	Menu
Copyright	Rich text
Enable Back To Top Button	Boolean

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.

Social Icons Repeats: min 0, default 5.

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
Background Color Hover	Color
Icon Color Hover	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.0	Stardust update
6.2.0	Accessibility improvements
6.1.0	Added responsive background options
6.0.1	Added aria label to social icon links
6.0.0	Converted to Non-global module
5.0.5	Added new Link options
5.0.4	Added image option to social icons
5.0.3	Social Icons Color Fixes
5.0.2	Footer Improvements