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.Sections's prop footerName and Footer.SubFooter's 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.

Name	Type	Default	Description
bottomFixed	boolean \| undefined	false	If true, the Footer will be fixed to the bottom of the page
children	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		The children of the Footer
className	string \| undefined		CSS class name to apply to each element within the component
css	CSSProperties \| Partial<Record<"abyss-footer-root" \| "abyss-footer-container" \| "abyss-footer-fixed", CSSProperties>> \| undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string \| undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean \| undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
footerRootTag	string \| undefined	'footer'	The HTML element to render the footer root element as
fullWidth	boolean \| undefined	false	If true, the Footer will take up the full width of the page
hiddenFrom	Breakpoint \| undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<ToSlotKey<{ root: LeafSlotDef<"footer", "footer-root">; container: LeafSlotDef<"div", "footer-container">; fixed: LeafSlotDef<"div", "footer-fixed">; }, "footer">, SlotPropsLeafValue>> \| undefined		Props to pass to individual internal slots of the component. See slotProps for more information
variant	"default" \| "alt" \| undefined	'default'	The variant of the Footer
visibleFrom	Breakpoint \| undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Footer.Upper Props

Name	Type	Default	Description
children	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		The content of the upper footer
className	string \| undefined		CSS class name to apply to each element within the component
css	CSSProperties \| Partial<Record<"abyss-footer-upper-container", CSSProperties>> \| undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string \| undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean \| undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
hiddenFrom	Breakpoint \| undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<"footer-upper-container", SlotPropsLeafValue>> \| undefined		Props to pass to individual internal slots of the component. See slotProps for more information
visibleFrom	Breakpoint \| undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Footer.MainContent Props

Name	Type	Default	Description
children	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		The main content of the footer
className	string \| undefined		CSS class name to apply to each element within the component
css	CSSProperties \| Partial<Record<"abyss-footer-main-container", CSSProperties>> \| undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string \| undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean \| undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
hiddenFrom	Breakpoint \| undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<"footer-main-container", SlotPropsLeafValue>> \| undefined		Props to pass to individual internal slots of the component. See slotProps for more information
visibleFrom	Breakpoint \| undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Footer.Brandmark Props

Name	Type	Default	Description
children	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		The brandmark content (logo, image, etc)
className	string \| undefined		CSS class name to apply to each element within the component
css	CSSProperties \| Partial<Record<"abyss-footer-brandmark-container", CSSProperties>> \| undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string \| undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean \| undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
hiddenFrom	Breakpoint \| undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
inSubFooter	boolean \| undefined	false	Whether to render in sub-footer
slotProps	Partial<Record<"footer-brandmark-container", SlotPropsLeafValue>> \| undefined		Props to pass to individual internal slots of the component. See slotProps for more information
visibleFrom	Breakpoint \| undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Footer.Sections Props

Name	Type	Default	Description
children	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		The main content of the footer
className	string \| undefined		CSS class name to apply to each element within the component
css	CSSProperties \| Partial<Record<"abyss-footer-links", CSSProperties>> \| undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string \| undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean \| undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
footerLinksTag	string \| undefined	'nav'	The HTML element to render the footer links container element as
footerName	string \| undefined	''	The ARIA label for the Footer
hiddenFrom	Breakpoint \| undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<"footer-links", SlotPropsLeafValue>> \| undefined		Props to pass to individual internal slots of the component. See slotProps for more information
spreadSections	boolean \| undefined	true	If true, the section column content will be spread across the Footer container. This is only recommended when using four or more section columns.
visibleFrom	Breakpoint \| undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Footer.Section Props

Name	Type	Default	Description
children	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		The children of the FooterSection
className	string \| undefined		CSS class name to apply to each element within the component
css	CSSProperties \| Partial<Record<"abyss-footer-section" \| "abyss-footer-section-title" \| "abyss-footer-list-container", CSSProperties>> \| undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string \| undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean \| undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
headingLevel	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined	2	Heading level of the FooterSection title
hiddenFrom	Breakpoint \| undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
slotProps	Partial<Record<ToSlotKey<{ section: LeafSlotDef<"div", "footer-section">; sectionTitle: LeafSlotDef<"div", "footer-section-title">; listContainer: LeafSlotDef<"ul", "footer-list-container">; }, "footer">, SlotPropsLeafValue>> \| undefined		Props to pass to individual internal slots of the component. See slotProps for more information
title	string \| undefined		The title of the FooterSection, rendered as a semantic heading and used as the section's accessible name.
visibleFrom	Breakpoint \| undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Footer.Link Props

Name	Type	Default	Description
afterIcon	"function" \| "filter" \| "cancel" \| "close" \| "save" \| "search" \| "article" \| "code" \| "details" \| "html" \| "iframe" \| "input" \| "label" \| "link" \| "map" \| "menu" \| "output" \| "script" \| ... 3568 more ... \| undefined		The IconSymbol to insert at the end of the Link
beforeIcon	"function" \| "filter" \| "cancel" \| "close" \| "save" \| "search" \| "article" \| "code" \| "details" \| "html" \| "iframe" \| "input" \| "label" \| "link" \| "map" \| "menu" \| "output" \| "script" \| ... 3568 more ... \| undefined		The IconSymbol to insert at the start of the Link
children	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		The content that provides the accessible link name
className	string \| undefined		CSS class name to apply to each element within the component
css	CSSProperties \| Partial<Record<"abyss-footer-link-item" \| "abyss-footer-link", CSSProperties>> \| undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string \| undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean \| undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
fontWeight	"bold" \| "regular" \| "normal" \| "$normal" \| "medium" \| "$medium" \| "$bold" \| undefined	'medium'	The font weight of the Link
hiddenFrom	Breakpoint \| undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
hideIcon	boolean \| undefined	false	If true, hides the new-window icon and also removes its screen-reader announcement that the link opens in a new window.
href	string \| undefined		The href to navigate to
isActive	boolean \| undefined		If true, the Link is considered the active route
isDarkMode	boolean \| undefined	false	If true, use dark mode styles
isStandardAnchor	boolean \| undefined	false	If true, ignore router and external Link checks
onClick	MouseEventHandler<HTMLElement>		Callback function executed when the Link is clicked
openNewWindow	boolean \| undefined	false	If true, the Link opens in a new window. By default, external links will open in a new window.
routerComponent	ComponentType<any> \| undefined		Custom router component to use for client-side navigation (e.g., Next.js Link, Gatsby Link, etc.)
size	"xs" \| "sm" \| "md" \| "lg" \| "$sm" \| "$md" \| "$lg" \| "$xs" \| undefined	'md'	The font size of the Link
slotProps	Partial<Record<ToSlotKey<{ item: LeafSlotDef<"li", "footer-link-item">; link: LeafSlotDef<"a", "footer-link">; }, "footer">, SlotPropsLeafValue>> \| undefined		Props to pass to individual internal slots of the component. See slotProps for more information
variant	"default" \| "underlined" \| "alt" \| "alt-underlined" \| undefined	'default'	The visual variant of the Link
visibleFrom	Breakpoint \| undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Footer.Social Props

Name	Type	Default	Description
children	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		Custom social content, in place of using props from Footer.Social
className	string \| undefined		CSS class name to apply to each element within the component
css	CSSProperties \| Partial<Record<"abyss-footer-social-container" \| "abyss-footer-social-title" \| "abyss-footer-social-link", CSSProperties>> \| undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string \| undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean \| undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
headingLevel	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined		Custom heading level for the social section title
hiddenFrom	Breakpoint \| undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
icons	SocialIconConfig[] \| undefined		Icons and links for social media
securityImage	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		Optional security/certification image
slotProps	Partial<Record<ToSlotKey<{ container: LeafSlotDef<"div", "footer-social-container">; title: LeafSlotDef<"div", "footer-social-title">; link: LeafSlotDef<"a", "footer-social-link">; }, "footer">, SlotPropsLeafValue>> \| undefined		Props to pass to individual internal slots of the component. See slotProps for more information
title	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		Title for the social links section, rendered as a semantic heading so screen reader users can navigate to it.
visibleFrom	Breakpoint \| undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Footer.SubFooter Props

Name	Type	Default	Description
bottomText	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		Additional text below copyright
brandmark	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		Brandmark to be placed in the sub-footer
children	string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null \| undefined		Custom children instead of using props
className	string \| undefined		CSS class name to apply to each element within the component
copyright	string \| undefined		Copyright text. Note that the copyright symbol and year are automatically prepended.
css	CSSProperties \| Partial<Record<"abyss-footer-sub-brandmark-container" \| "abyss-footer-copyright-container" \| "abyss-footer-copyright" \| "abyss-footer-bottom-text" \| ... 5 more ... \| "abyss-footer-sub-footnotes", CSSProperties>> \| undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string \| undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean \| undefined	false	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
hiddenFrom	Breakpoint \| undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
links	FooterSubFooterLink[] \| undefined		Array of link objects
name	string \| undefined	'sub footer'	The ARIA label for the sub-footer
slotProps	Partial<Record<ToSlotKey<{ brandmarkContainer: WrappedSlotDef<"footer-sub-brandmark-container">; copyrightContainer: LeafSlotDef<"div", "footer-copyright-container">; ... 7 more ...; footnotes: LeafSlotDef<...>; }, "footer">, SlotPropsLeafValue>> \| undefined		Props to pass to individual internal slots of the component. See slotProps for more information
visibleFrom	Breakpoint \| undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

Class Name	Description
.abyss-footer-container	Footer container
.abyss-footer-fixed	Footer fixed position
.abyss-footer-root	Footer root

Footer.Upper Classes

Class Name	Description
.abyss-footer-upper-container	Container element for upper footer content

Footer.MainContent Classes

Class Name	Description
.abyss-footer-main-container	Container element for main footer content

Footer.Brandmark Classes

Class Name	Description
.abyss-footer-brandmark-container	Container for the brandmark

Footer.Sections Classes

Class Name	Description
.abyss-footer-links	Container element for list of Footer.Link

Footer.Section Classes

Class Name	Description
.abyss-footer-list-container	Footer list section
.abyss-footer-section	Footer section element
.abyss-footer-section-title	Footer section title

Footer.Link Classes

Class Name	Description
.abyss-footer-link	Link item
.abyss-footer-link-item	Link item container

Footer.Social Classes

Class Name	Description
.abyss-footer-social-container	Container for social section
.abyss-footer-social-link	Container for linked social icons
.abyss-footer-social-title	Title for social section

Footer.SubFooter Classes

Class Name	Description
.abyss-footer-bottom-text	Sub-footer text below copyright
.abyss-footer-copyright	Sub-footer copyright text
.abyss-footer-copyright-container	Sub-footer copyright container
.abyss-footer-sub-brandmark-container	Brandmark container for sub-footer
.abyss-footer-sub-divider	Sub-footer link divider
.abyss-footer-sub-footnotes	Sub-footer footnotes - copyright and links
.abyss-footer-sub-link	Sub-footer link
.abyss-footer-sub-list	Sub-footer link list
.abyss-footer-sub-nav	Sub-footer navigation container
.abyss-footer-sub-wrapper	Sub-footer wrapper

Keyboard Interactions

Key	Description
Tab	Moves focus to the next focusable element; all focusable elements in the footer are included in the page Tab sequence.
Shift + Tab	Moves focus to the previous focusable element; all focusable elements in the footer are included in the page Tab sequence.
Enter	When focus is on the link element, pressing Enter will take the user to a separate page.

Component Tokens

Tip

Click on the token row to copy the token to your clipboard.

Search tokens

Token Name	Value
footer.color.border.separator.dark	#FFFFFF
footer.color.border.separator.light	#4B4D4F
footer.color.border.top.container.dark	#002677
footer.color.border.top.container.light	#FFFFFF
footer.color.surface.container.dark	#002677
footer.color.surface.container.light	#FFFFFF
footer.border-width.separator	1px
footer.border-width.top.container	2px
footer.spacing.gap.horizontal.content.web	48px
footer.spacing.gap.vertical.bottom-content	24px
footer.spacing.gap.vertical.content.mobile	48px
footer.spacing.padding.bottom.container	16px
footer.spacing.padding.horizontal.container.mobile	32px
footer.spacing.padding.horizontal.container.web	48px
footer.spacing.padding.top.container	32px

Footnote Tokens

Search tokens

Token Name	Value
footer-footnote.color.border.separator.dark	#FFFFFF
footer-footnote.color.border.separator.light	#4B4D4F
footer-footnote.color.text.copyright.dark	#FFFFFF
footer-footnote.color.text.copyright.light	#4B4D4F
footer-footnote.spacing.gap.horizontal.container.web	80px
footer-footnote.spacing.gap.horizontal.copyright	8px
footer-footnote.spacing.gap.horizontal.links.web	8px
footer-footnote.spacing.gap.horizontal.right-content.web	24px
footer-footnote.spacing.gap.vertical.container.mobile	12px
footer-footnote.spacing.gap.vertical.links.mobile	8px

Link Tokens

Search tokens

Token Name	Value
footer-link.color.icon.alt.active	#E5E5E6
footer-link.color.icon.alt.hover	#F3F3F3
footer-link.color.icon.alt.rest	#FFFFFF
footer-link.color.icon.default.active	#000000
footer-link.color.icon.default.hover	#323334
footer-link.color.icon.default.rest	#4B4D4F
footer-link.color.icon.disabled	#7D7F81
footer-link.color.text.alt.active	#E5E5E6
footer-link.color.text.alt.hover	#F3F3F3
footer-link.color.text.alt.rest	#FFFFFF
footer-link.color.text.default.active	#000000
footer-link.color.text.default.hover	#323334
footer-link.color.text.default.rest	#4B4D4F
footer-link.color.text.disabled	#7D7F81
footer-link.sizing.all.icon	16px
footer-link.spacing.gap.horizontal.label	4px

Sections Tokens

Search tokens

Token Name	Value
footer-sections.color.text.heading.light	#4B4D4F
footer-sections.color.text.heading.dark	#FFFFFF
footer-sections.color.icon.social.light	#4B4D4F
footer-sections.color.icon.social.dark	#FFFFFF
footer-sections.sizing.all.icon	24px
footer-sections.spacing.gap.horizontal.container.web	48px
footer-sections.spacing.gap.horizontal.social-icons	8px
footer-sections.spacing.gap.vertical.columns	8px
footer-sections.spacing.gap.vertical.container.mobile	48px

Migration Information

Variants

Footer.Upper

Footer.MainContent

Footer.Brandmark

Predefined layout

Custom layout

Footer.Sections

Footer.Section

Footer.Link

Footer.SubFooter

Sub-footer copyright

Sub-footer bottom text

Sub-footer links

Footer name and sub-footer name

Footer Props

Footer.Upper Props

Footer.MainContent Props

Footer.Brandmark Props

Footer.Sections Props

Footer.Section Props

Footer.Link Props

Footer.Social Props

Footer.SubFooter Props

Footer Classes

Footer.Upper Classes

Footer.MainContent Classes

Footer.Brandmark Classes

Footer.Sections Classes

Footer.Section Classes

Footer.Link Classes

Footer.Social Classes

Footer.SubFooter Classes

Keyboard Interactions

Component Tokens

Footer Tokens

Footnote Tokens

Link Tokens

Sections Tokens

Migration Information

Variants​

Footer.Upper​

Footer.MainContent​

Footer.Brandmark​

Social​

Predefined layout​

Custom layout​

Footer.Sections​

Footer.Section​

Footer.Link​

Footer.SubFooter​

Sub-footer copyright​

Sub-footer bottom text​

Sub-footer links​

Footer name and sub-footer name​

Footer Props​

Footer.Upper Props​

Footer.MainContent Props​

Footer.Brandmark Props​

Footer.Sections Props​

Footer.Section Props​

Footer.Link Props​

Footer.Social Props​

Footer.SubFooter Props​

Footer Classes​

Footer.Upper Classes​

Footer.MainContent Classes​

Footer.Brandmark Classes​

Footer.Sections Classes​

Footer.Section Classes​

Footer.Link Classes​

Footer.Social Classes​

Footer.SubFooter Classes​

Keyboard Interactions​

Component Tokens​

Footer Tokens​

Footnote Tokens​

Link Tokens​

Sections Tokens​

Variants

Footer.Upper

Footer.MainContent

Footer.Brandmark

Social

Predefined layout

Custom layout

Footer.Sections

Footer.Section

Footer.Link

Footer.SubFooter

Sub-footer copyright

Sub-footer bottom text

Sub-footer links

Footer name and sub-footer name

Footer Props

Footer.Upper Props

Footer.MainContent Props

Footer.Brandmark Props

Footer.Sections Props

Footer.Section Props

Footer.Link Props

Footer.Social Props

Footer.SubFooter Props

Footer Classes

Footer.Upper Classes

Footer.MainContent Classes

Footer.Brandmark Classes

Footer.Sections Classes

Footer.Section Classes

Footer.Link Classes

Footer.Social Classes

Footer.SubFooter Classes

Keyboard Interactions

Component Tokens

Footer Tokens

Footnote Tokens

Link Tokens

Sections Tokens