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.
| Name | Type | Description | Default |
|---|---|---|---|
New | 'default' | 'reduced' | The available footer modes:
| '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:
| - |
| 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:
| - |
| copyright | string | The text that will be displayed as copyright disclaimer. | - |
| children | React.ReactNode | The 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. | - |
| tabIndex | number | Value of the tabindex for all interactive elements, except those inside the custom area. | 0 |