Expand commentComment on line R9Resolved

Footer

The footer is a UI component placed at the bottom of the page, providing informational context, secondary navigation, and legal or support links.

The footer is part of the application layout, so it can only be used inside of it. Please check the DxcApplicationLayout documentation.

Props

NameTypeDescriptionDefault
bottomLinks
{ href: string; text: string; }[]
An array of objects representing the links that will be rendered at the bottom part of the footer. Each object has the following properties:
  • text: Text for the link.
  • href: URL of the page the link goes to.
-
copyrightstringThe text that will be displayed as copyright disclaimer."© DXC Technology ${year}. All rights reserved."
New
leftContent
React.ReactNodeContent to be displayed on the left side of the footer under the logo.-
New
logo
{ src: string | SVG; alt: string; }
Logo to be displayed inside the footer.
{ src: DxcLogo, alt: "DXC Technology Logo" }
mode'default' | 'reduced'The available footer modes:
  • default: Footer with full content.
  • reduced: Smaller footer with minimal content.
'default'
New
rightContent
React.ReactNodeContent to be displayed on the right side of the footer before the socialLinks if provided.-
socialLinks
{ href: string; title: string; logo: string | SVG; }[]
An array of objects representing the links that will be rendered as icons at the top-right side of the footer. Each object has the following properties:
  • href: URL of the page the link goes to.
  • title: Text representing advisory information related to the social link. Under the hood, it also serves as an accessible label for the icon.
  • logo: Material Symbol name or SVG element as the icon used for the link. When using Material Symbols, replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the symbol name with "filled_".
-
tabIndexnumberValue of the tabindex for all interactive elements, except those inside the leftContent and rightContent.0

Examples