Footer
Content fixed at the bottom of a page to provide important information or links.
Footers are persistent elements on web pages that provide quick links and legal content. Some applications might not include a footer on each page and can provide the same information from a navigation bar or Settings/About section. When they’re used, they’re placed at the bottom of the page.
Also known as: Bottom section, end section, UITabBar (iOS), BottomNavigationView (Android).
Anatomy
A. Brand mark (required): Visual element representing Visa, a partner brand, or a fictitious brand associated with the product.
B. Copyright text (optional): Text providing critical legal information including a copyright symbol, year of creation, the author’s name, and a rights statement.
C. Links (optional): Link components directing users to legal information.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Default footer | When footer contains minimal content. | As a source for site navigation. |
| Navigational footer | When there’s a need for more content within the footer area including links to important site resources. | As the main source for site navigation. |
Best practices
- Follow all guidance found in Link when implementing links in the footer.
- Ensure the footer appears the same on every page where it’s used.
Placement
Placement of the footer depends on the use case and experience needs. Consider the three options below when using the footer component.
Fixed
Footers can be fixed to the bottom of a web page to let users know they’ve reached the end. This is the default behavior for footers as its the least disruptive to the user.
Sticky
Footers can also be “sticky” to ensure they’re always visible. Sticky footers stay at the bottom of the viewport regardless of how the user scrolls.
- Only use this method if the footer content is critical and needs to be accessible at all times.
About pages
The application can use an “About” page if the footer content doesn’t need to appear on every page. This page could include content like copyright notices or acknowledgments, providing a less high-profile way for users to access this information. Check with Product Legal requirements about what must be accessible to users at all times.
Platform considerations
Web
On most web pages, the footer size is determined by the screen size. The footer component has responsive breakpoints to support a full range of devices. The standard 1440 px footer is recommended for desktop web environments.
Tablet
On tablets, the footer size and layout is determined by screen size and orientation. The standard approach for tablet footers is 768px.
Mobile
On mobile, the footer size and layout are determined by the screen size and orientation. The mobile navigational footer can be adjusted for different breakpoints to support a range of mobile devices, including tablets and smartphones. The standard approach is 768px for tablets, 767px to 346px for devices between tablet and mobile, and 345px for mobile devices.
Content
- Write all content in sentence case, except for acronyms or proper nouns, like the application name.
- Don’t use punctuation for navigation items.
- Ensure the links in navigation footers match page titles to enhance the user’s understanding of the site’s information hierarchy.
- Ensure the copyright notice only contains the following details: copyright symbol, year of creation, name of author, rights statement.
- Follow guidance for labeling links. Learn more in Link.
