The footer is a universal pattern to be used in all scenarios where a footer is required. There are two parts to the footer: quick links, and disclosures. Quick links are only required on prospect pages, and disclosures are required on all pages both prospect and customer.
The footer is wrapped entirely in a
<footer> tag. The container,
<div class="container"> belongs inside the
which also means that
<footer> should never be inside of an already existing
The footer pattern will automatically apply the footer background color as well as adjust disclaimer text appropriately. This ensures complete WCAG compliance. For more information regarding accessibility please read our Accessibility page.
Quick links sections are inside of the footer, and are a repeatable pattern.
The last section of the quick links includes a social aspect of both on-site links to our branch locator or to email us as well as external social media. These icons are provided through the System Iconography or through special social media helper classes.
The disclaimers section of the footer is used across all projects. Similar to the
"Quick Links" section of the footer, it must be inside the
<footer> component within the grid system. It includes not only
the required legal text, but also any required legal images. The legal images
are provided as part of the Design Language and easily accessible through helper classes.
Legal text always appears above the disclaimer images. This section should keep the consistent spacing as shown in the examples, but the layout and content inside the legal text will vary. Note that the horizontal rule underneath the legal text is not part of the legal text, but part of the legal images section instead.
Legal images always appear below the legal text, and divide the section with a horizontal rule.
For reference, below you will find each of the images available for the disclaimer logos.
tabto browse results, and