Footer component for Element React
The Footer provides a container in which navigation, copyrights, and help can be organized.
- Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
- Verify your token is correctly set up in your .npmrc as per the link above
- Verify you have the @element scope configured in your .npmrc
- @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
- Install the component and themes bundles
- npm i @element/react-components @element/themes
- alternatively install the component individually along with the themes bundle npm i @element/react-footer @element/themes
The Footer component is normally placed at the bottom of the page to display things such as lists, links, buttons and copyrights. The created component provides functionality to create custom lists, buttons with icons, and text for copyrights. Using the Footer is a good way to organize navigation, special links, icons, and contact information.
| Name | Type | Default | Required | Description |
| ------------------ | ------- | --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| themeColor | string | 'surface' | false | Color of the Footer.
Accepted Values: transparent, surface, surface-variant, primary, primary-variant, primary-50, primary-100, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-900, secondary, secondary-variant, secondary-50, secondary-100, secondary-200, secondary-300, secondary-400, secondary-500, secondary-600, secondary-700, secondary-800, secondary-900, danger, danger-variant, danger-50, danger-100, danger-200, danger-300, danger-400, danger-500, danger-600, danger-700, danger-800, danger-900, ancillary-100, ancillary-200, ancillary-300, ancillary-400, ancillary-500, ancillary-600, ancillary-700, ancillary-800, ancillary-900 |
| useContentMaxWidth | boolean | false | false | If true the footer's content will have a max width according to your theme's breakpoints. |
| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | ---------------------------------------- |
| children | React.ReactNode | null | false | The default container for Footer content |
| Name | Type | Default | Required | Description |
| ---------- | -------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| lgCols | string\|number | '3' | false | How many columns to create for the large breakpoint. |
| mdCols | string\|number | '1' | false | How many columns to create for the medium breakpoint. |
| smCols | string\|number | '1' | false | How many columns to create for the small breakpoint. |
| themeColor | string | 'surface' | false | Color of the Footer Bottom.
Accepted Values: transparent, surface, surface-variant, primary, primary-variant, primary-50, primary-100, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-900, secondary, secondary-variant, secondary-50, secondary-100, secondary-200, secondary-300, secondary-400, secondary-500, secondary-600, secondary-700, secondary-800, secondary-900, danger, danger-variant, danger-50, danger-100, danger-200, danger-300, danger-400, danger-500, danger-600, danger-700, danger-800, danger-900, ancillary-100, ancillary-200, ancillary-300, ancillary-400, ancillary-500, ancillary-600, ancillary-700, ancillary-800, ancillary-900 |
| Name | Type | Default | Required | Description |
| ---------------- | --------------- | ------- | -------- | ---------------------------------------------------------------------------- |
| children | React.ReactNode | null | false | The default container for Footer content |
| copyrightContent | React.ReactNode | null | false | The center content of the FooterBottom component. |
| footerIcons | React.ReactNode | null | false | Expects one or more FooterIcons, will accept any valid components or markup. |
| links | React.ReactNode | null | false | A container for common links. |
| Name | Type | Default | Required | Description |
| --------- | ------ | --------- | -------- | ---------------------------------------------------------------- |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | ----------------------------------------------- |
| children | React.ReactNode | null | false | The default container for FooterBottom content. |
| Name | Type | Default | Required | Description |
| --------- | -------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------------- |
| alignment | string | undefined | false | Content alignment.
Accepted Values: start, center, end |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| gap | string | 'standard' | false | The spacing between items.
Accepted Values: none, dense, standard, airy |
| lgColSpan | string\|number | '1' | false | How many columns to span the large breakpoint when customizing Footer Bottom columns. |
| margin | string | 'standard' | false | The top and bottom spacing around the group component.
Accepted Values: none, dense, standard, airy |
| mdColSpan | string\|number | '1' | false | How many columns to span the medium breakpoint when customizing Footer Bottom columns. |
| smColSpan | string\|number | '1' | false | How many columns to span the small breakpoint when customizing Footer Bottom columns. |
| style | object | null | false | Passthrough style object. |
| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | ----------------------------------------------- |
| children | React.ReactNode | null | false | The default container for FooterBottom content. |
| Name | Type | Default | Required | Description |
| ---------- | ------ | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| themeColor | string | 'surface' | false | Color of the Footer Bottom.
Accepted Values: transparent, surface, surface-variant, primary, primary-variant, primary-50, primary-100, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-900, secondary, secondary-variant, secondary-50, secondary-100, secondary-200, secondary-300, secondary-400, secondary-500, secondary-600, secondary-700, secondary-800, secondary-900, danger, danger-variant, danger-50, danger-100, danger-200, danger-300, danger-400, danger-500, danger-600, danger-700, danger-800, danger-900, ancillary-100, ancillary-200, ancillary-300, ancillary-400, ancillary-500, ancillary-600, ancillary-700, ancillary-800, ancillary-900 |
| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | -------------------------------------------------------------------------- |
| children | React.ReactNode | null | false | Content to be rendered inside the Footer Bottom. Accepts any valid markup. |
| Name | Type | Default | Required | Description |
| --------- | ------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------ |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| lgColSpan | string\|number | '1' | false | How many columns to span the large breakpoint when customizing Footer Bottom columns. |
| mdColSpan | string\|number | '1' | false | How many columns to span the medium breakpoint when customizing Footer Bottom columns. |
| smColSpan | string\|number | '1' | false | How many columns to span the small breakpoint when customizing Footer Bottom columns. |
| tag | string\|React.ElementType | 'div' | false | By default a div will be rendered, this allow another tag to be used instead. A block type component is suggested. |
| title | string | undefined | false | The header title of the content in footer. |
| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | ------------------------------------------- |
| children | React.ReactNode | null | false | The default container for FooterCol content |
| Name | Type | Default | Required | Description |
| ---------- | -------------- | --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| gap | string | '64px' | false | Gap between the columns and the pixels. Must be a valid css gap declaration for css display grid |
| lgCols | string\|number | undefined | false | How many columns to create for the large breakpoint. |
| mdCols | string\|number | undefined | false | How many columns to create for the medium breakpoint. |
| smCols | string\|number | '1' | false | How many columns to create for the small breakpoint. |
| themeColor | string | null | false | Color of the Footer.
Accepted Values: transparent, surface, surface-variant, primary, primary-variant, primary-50, primary-100, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-900, secondary, secondary-variant, secondary-50, secondary-100, secondary-200, secondary-300, secondary-400, secondary-500, secondary-600, secondary-700, secondary-800, secondary-900, danger, danger-variant, danger-50, danger-100, danger-200, danger-300, danger-400, danger-500, danger-600, danger-700, danger-800, danger-900, ancillary-100, ancillary-200, ancillary-300, ancillary-400, ancillary-500, ancillary-600, ancillary-700, ancillary-800, ancillary-900 |
| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | ---------------------------------------- |
| children | React.ReactNode | null | false | The default container for Footer content |
| Name | Type | Default | Required | Description |
| --------- | ------ | --------- | -------- | ---------------------------------------------------------------- |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| Name | Type | Default | Required | Description |
| ---------- | ----------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| icon | string\|React.ReactNode | null | false | For simple use-cases, this will automatically create the icon object. |
| themeColor | string | 'gray' | false | Color variations. Variants prefixed with filled- will add a background color to the icon according to the theme. Variants prefixed with color- will change the color of the icon according to the theme.
Accepted Values: filled-danger-alt, filled-danger, filled-muted, filled-primary, filled-secondary, color-primary, color-secondary, color-on-dark, blue, gray, green, orange, purple, red, teal, yellow |
| Name | Type | Default | Required | Description |
| --------- | -------------- | --------- | -------- | -------------------------------------------------------------------------------------- |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| lgColSpan | string\|number | '1' | false | How many columns to span the large breakpoint when customizing Footer Bottom columns. |
| mdColSpan | string\|number | '1' | false | How many columns to span the medium breakpoint when customizing Footer Bottom columns. |
| smColSpan | string\|number | '1' | false | How many columns to span the small breakpoint when customizing Footer Bottom columns. |
| title | string | undefined | false | The header title of the content in footer. |
| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | -------------------------------------------- |
| children | React.ReactNode | null | false | The default container for FooterList content |
| Name | Type | Default | Required | Description |
| --------- | ------ | --------- | -------- | ---------------------------------------------------------------- |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| Name | Type | Default | Required | Description |
| -------- | --------------- | ------- | -------- | ----------------------------------------------- |
| children | React.ReactNode | null | false | The default container for FooterBottom content. |
| Name | Type | Default | Required | Description |
| --------- | ----------------------- | --------- | -------- | ---------------------------------------------------------------- |
| className | string | undefined | false | The css class name to be passed through to the component markup. |
| logo | string\|React.ReactNode | null | false | Optional logo. Expects an image but accepts any valid markup. |