Reusable Designs: Web Footer

Components for designers and developers building user interfaces.

The website footer displays a column of information about the University Libraries as well as one or two lists of helpful links. The very bottom of the footer features a single row — or subfooter — in with copyright information from the University.

Content featured in the footer changes across products, but stays consistent throughout a specific website.

Use this footer as a starting point for any University Libraries' website and customize the links of links for your needs. 

Contact information should be in the first column of the footer and linked accordingly. All library locations are provided by default. If including email or phone, the latter should be selectable to dial from a mobile phone. 

The second column is for library social media accounts. If your project does not require these, you may repurpose this column for other items.

The footer provides two additional columns for additional content. Aim for a balanced number of items. When selecting items:

  • Point to content addressing popular use cases, or that might answer visitor’s remaining questions as they reach the bottom of the site. 
  • Steer away from mirroring groupings in top level header navigation.
  • If you need to include disclaimers and legal content, try to keep it as minimal as possible.

Subfooter

Include copyright information: year and GVSU. We recommend updating the provided code example to dynamically change the copyright year based on the tech stack of your site (PHP, JS, Rails) so it doesn’t go out of date.

Also include the GVSU Privacy Statement, AA/EO statement, HERF Statement, and the Disclosures link.

You can also optionally use this space to call out open source solutions used to build the site.

Relevant WCAG guidelines

Code

Our design system is deeply indebted to the University of Michigan Libraries' Design System.

  • Last Updated: Oct 11, 2024 11:51 AM
  • URL: https://libguides.gvsu.edu/reusabledesigns