Footer
A responsive <footer> component.
Usage
Use the links prop to display a list of links in the center of the footer. You can also use the #left, #center and #right slots to customize it further.
{
"message": "You should use slots with <ContentRenderer>",
"value": {},
"excerpt": false,
"tag": "div"
}There is also a
#top slot available, check out the FooterColumns component.Slots
top
{}
right
{}
center
{}
left
{}
Props
ui
DeepPartial<{ wrapper: string; top: { wrapper: string; container: string; }; bottom: { wrapper: string; container: string; left: string; center: string; right: string; }; }>
{}links
FooterLink[]
[]Config
{
wrapper: 'relative',
top: {
wrapper: '',
container: 'py-8 lg:py-12'
},
bottom: {
wrapper: '',
container: 'py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3',
left: 'flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1',
center: 'mt-3 lg:mt-0 lg:order-2 flex items-center justify-center',
right: 'lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3'
}
}