Footer
Do you need a relatively classic and customizable footer? If so, this component was made for you. Footer provides a light but highly customizable interface so you can build a footer staight out of the box. All the default styling is already handled for you.
Note: Some components used in the following stories like the
<YourOwnBanner>or the icons are not included - you can bring any component of your choosing when you use the Footer.
Default
A big footer
No bottom banner
Background image
No title
No icons
Extended
This component was extended using styled() from styled-components.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| bottomBanner | node | The content of the bottom banner. Leave to undefined if you don't want one. | |
| children | node | The Footer's children. You can use Footer.Column & Footer.Item components or bring any component you want. | |
| image | object | The footer's background image. Please refer to MUI's CardMedia's props for the exhaustive list: https://material-ui.com/api/card-media/. | |
| title | string | The footer's title. |
The ref will be forwarded to the html root element, as well as any other props.
Footer.Column
Default Column
With a title
Awesome title
Inline
Awesome title
Extended
This component was extended using styled() from styled-components.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | The children nodes to render inside the column. | |
| isInline | bool | false | Set to true if you want to align the column's items on one horizontal line. |
| title | string | The column's title. |
The ref will be forwarded to the html root element, as well as any other props.
Footer.Item
Default Item
As a button
Extended
This component was extended using styled() from styled-components.
Props
This component extends Material's UI <Button> so you can use all its props as well. Check out its Api.
| Name | Type | Default | Description |
|---|---|---|---|
| icon | node | The item's icon. |
The ref will be forwarded to the html root element, as well as any other props.