Footer

v1.0.3

Ready for Production

The Catalyst Footer is a compound component that assembles PMI-compliant footer layouts — trademark text, legal navigation links, and copyright notice — with responsive behavior and dark-mode support built in. Every sub-component accepts a className prop for brand-specific theming.

Installation

npm install @pmi/catalyst-footer

import {
  FooterRoot,
  FooterLegalRequired,
  FooterTrademark,
  FooterBottom,
  FooterLinks,
  FooterCopyright,
} from '@pmi/catalyst-footer';

Common Patterns

With Optional Links

Add up to two additional optional links (e.g. Sitemap, Purchasing Terms) beyond the three required links.

API Reference

Footer is a compound component. The sections below summarize the API surface for each part.

FooterRoot

The root container element. Renders as a <footer> element with role="contentinfo".

FooterLegalRequired

Container for legally required footer content (trademark and bottom section).

FooterTrademark

Displays the PMI trademark and licensing information.

FooterBottom

Container for the bottom section with links and copyright. Renders a top border and responsive flex layout.

FooterLinks

Navigation component displaying legal and informational links (3 required, up to 2 optional).

FooterCopyright

Displays the copyright notice. Automatically prepends © {currentYear} before children.

Accessibility

The Footer is designed to meet WCAG 2.2 AA standards.

Keyboard Interactions

ARIA

• FooterRoot renders a <footer> element with role="contentinfo", marking the landmark for screen readers.
• FooterLinks wraps links in a <nav> with an <ul>; the ariaLabel prop (default "Footer Links") is applied to the <nav> landmark so screen readers announce it correctly.
• Links opened in a new tab include a visually hidden (opens in a new tab) announcement for screen reader users.
• External links automatically receive rel="noopener noreferrer".
• When providing custom className overrides, verify color contrast meets the WCAG 2.2 AA minimum of 4.5:1 for text.

Choosing the Right Component

Use Footer when you need a PMI-compliant product application footer. Reach for a different component when:

Related

• Link
• Navigation Menu