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, where the
<footer> tag replaced the
<div class="container"> belongs inside the
<footer> tag, 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.
The quick links are used only on prospect pages, therefore are avaialble as an optional section.
Note that the quick links snippet provided should be used in conjunction with the footer structure, and should be placed inside the
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.
he disclaimers section of the footer is used accross all projects. Similar to the "Quick Links" section of the footer, it must be inside the
<footer> component inside the grid. 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.