Footer

import { Footer } from '@uhg-abyss/web/ui/Footer';

Variants

The default variant of Footer has a dark blue background and white text. Use 'alt' for a light color scheme with dark text.

Footer.Upper

For additional customization, use Footer.Upper as a slot that goes above the main footer.

Footer.MainContent

The main content of the footer is wrapped in Footer.MainContent.

Footer.Brandmark

There are two optional locations to add a logo to the footer. Subcomponent Footer.Brandmark is the upper left location, while the prop brandmark on Footer.SubFooter is in the bottom right.

Footer.Social adds a section on the right of the footer dedicated to social media links. There are two ways to utilize this section: the predefined layout or a custom layout.

Predefined layout

The predefined layout is a basic layout with space for icon links and an optional site security image. To use this option, provide the following props to Footer.Social:

{
  title?: string;
  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
  icons?: Array<{
    icon: string | { icon: string; variant: 'filled' | 'outlined' } | React.ReactElement;
    href: string;
    title: string;
  }>;
  securityImage?: string;
}

title: The title of the social media section.
headingLevel: The heading level to use for the title. Default is 2.
icons: An array of objects with the following properties:
- icon: The icon to display. Use a string of an object with the icon and variant values to use an IconSymbol. Use a ReactElement to provide a custom icon.
- href: The URL the icon links to.
- title: The accessible title of the icon link.
securityImage: An optional image to display at the bottom of the social media section.

Custom layout

Footer.Social also accepts a ReactNode for custom layouts. Below is an example with a custom section:

Footer.Sections

Footer.Sections is a container for Footer.Section components. It allows for the prop spreadSections to be passed down to control the alignment of the sections. Default is set to true. When false, content is left-aligned.

Footer.Section

Each individual section is wrapped in Footer.Section. Use the title prop to add a title to the footer section container.

For accessibility purposes, section titles are implemented as HTML headers—<h2> elements by default. Use the headingLevel prop to change the heading level.

Footer.Link

The Footer.Link sub-component leverages props from the Link component. Find additional resources on our Link page.

Use the href prop to set the URL of the link.

Use the onClick prop to trigger a custom function when the footer link title is clicked.

Use the openNewWindow prop to specify whether links open in a new window. openNewWindow is false for relative links. Absolute links will open in a new window.

Footer.SubFooter

To customize the sub-footer, use the Footer.SubFooter sub-component. This sub-component accepts children of type React.ReactNode, similar to Footer.Upper, or the following props:

{
  copyright?: string;
  links?: Array<{ label: string, href: string }>;
  bottomText?: string | React.ReactNode;
  brandmark?: React.ReactNode;
  name?: string;
}

copyright: The text to display in the copyright section.
links: An array of objects with the following properties:
- label: The text of the link.
- href: The URL the link points to.
bottomText: Text to display below the copyright.
brandmark: A logo to display in the sub-footer.
name: The name of the sub-footer for accessibility purposes.

Use the copyright prop to change the title of the copyright section.

Sub-footer bottom text

Use the bottomText prop to add content below the copyright text.

Use the links prop to add the sub-footer link array. Use href to set the link to a different page, and use label to set the descriptive text for the href.

Footer.Sectionss prop footerName and Footer.SubFooters name are used for accessibility purposes. If you have more than one footer on a page, footerName and name can help differentiate them for screen readers.