Skip to content

Footer

Experimental

A Footer is used to render a responsive page footer.

Examples

This example shows a complete footer:

This example shows a footer with logo only:

This example shows a footer with title only:

This example shows a footer with social icons only:

And this example shows a minimalistic footer:

System props

Footer does not support system props from Styled System.

Component props

NameTypeDefaultRequiredDescription
logoNodeComponent that renders a logo (composition pattern).
titleString
socialIconsNodeSocial icons (composition pattern). You can use SocialIcons or build your own component.
linksArray of LinkFooter links (Link is defined below).
NameTypeDefaultRequiredDescription
textString
hrefStringWhen omitted link cannot be clicked.

Variants

You can customize Footer by defining the following variants in your theme:

KeyDescription
footerSet color and bg.
footer.containerSet maxWidth and padding.
footer.logoSet mb for logo.
footer.titleSet mb for title.

In this example we customize Footer just like in @undataforum/preset. This needs to be done in your theme. In this example we do the customizations inside a ThemeProvider so they are visible in below source code.

Visual regression testing

The following URLs can be used for visual regression testing: