1. Design System
2. Patterns
3. Footer

Footer

Use the footer to guide users who reach the bottom of the page without finding what they want.

Help users find what they need at the bottom of your page.

When to use

Use the footer if your website includes library.upenn.edu in the domain.

When to consider something else

Skip the footer if your website is not one of our digital spaces or if using it would be misleading. Some of our resources may appear on other websites without being part of our digital spaces.

How to use

The footer includes the library address, phone number, contact link, location and hours, social media accounts, and Penn Brand Standards' required university global resources.

Show the footer on every page. Missing footers can confuse users.

Curate your footer. Add links to popular content that might answer visitors' remaining questions.

The footer doesn't need to mirror the header. Group footer links based on user needs, not your header navigation structure.

Default

<pennlibs-footer></pennlibs-footer>

Add a section

<pennlibs-footer>
  <!-- Add your content to the footer with <section>, <h2>, and <a> elements. -->
  <section>
    <h2>Service Name</h2>
    <a href="/section-a">Section A</a>
    <a href="/section-b">Section B</a>
    <a href="/section-b">Section C</a>
  </section>
</pennlibs-footer>

Attributes

Attribute	Description	Type	Default
show-built-with	When true, shows a "Built with the Penn Libraries Design System" line below the footer.	boolean	false

Slots

Slot	Description
default	Custom navigation sections with h2 headings and anchor links

Custom properties

Name	Description
--pl-viewport-margins-max-width	The maximum width of the footer content.
--pl-viewport-margins-gutter	The gutter width of the footer content.