Halstack
Design system
v7.0.0
OverviewIntroduction
ComponentsAccordionAlertApplication layoutBleedBoxBulleted ListButtonCardCheckboxChipDate InputDialogDropdownFile InputFlexFooterHeaderHeadingInsetLinkNav TabsNumber InputPaginatorParagraphPassword InputProgress BarQuick NavRadio GroupResultset TableSelectSidenavSliderSpinnerSwitchTableTabsTagText InputTextareaToggle GroupTypographyWizard
Footer
Ready
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.
warning
The
padding prop has been deprecated. Consider using layout components like the Inset for the same purpose.| Name | Default | Description |
|---|---|---|
| socialLinks: object[] | [] | 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: object[] | [] | 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: node | The center section of the footer. Can be used to render custom content in this area. | |
| margin: string | Size of the top margin to be applied to the footer ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). | |
| padding: string | object | Deprecated Size of the padding to be applied to the custom area of the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes. | |
| tabIndex: number | 0 | Value of the tabindex for all interactuable elements, except those inside the custom area. |