Footer

Footers are a secondary element in a web page because they usually appear at the bottom and it is the last thing that the user interacts with. But the presence of the footer must be designed in every application and be part of it (consumer or back-office) as it is a key layout element to the overall experience. It is a choice of the designer to either leave the footer visible by default or push it down, depending on the use case.

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

Props

NameTypeDescriptionDefault
New
mode
'default' | 'reduced'The available footer modes:
  • default: Footer with full content.
  • reduced: Smaller footer with minimal content.
'default'
socialLinks{ href: string; title: string; logo: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); }[]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_".
-
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.-
childrenReact.ReactNodeThe center section of the footer. Can be used to render custom content in this area.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'Size of the top margin to be applied to the footer.-
tabIndexnumberValue of the tabindex for all interactive elements, except those inside the custom area.0

Examples