Component is used to display a footer at the bottom of the page.
Props
structure | spread | row | split | column | - |
frame | fill | panel | contain | - |
size | xs | sm | md | lg | xl | - |
compact | boolean | - |
align | start | center | end | center |
variant | base | ghost | subtle | soft | surface | subtle |
theme | string | - |
as | HTMLTag | footer |
HTML Attributes | Polymorphic<as> | - |
Examples
size
The size prop cascades: it is inherited from the parent and it is applied to all children.
variant
Sets the color variant used for this component and all its children.
frame
structure
Applies all styles & props of the chosen Structure
component to this component.
spread
Structures children in a row with space between them and wrapping.
row
Structures children in a horizontal row.
split
Equal columns above a certain breakpoint, based on CSS grid.
On small screens it behaves the same as column
.
column
Structures children in a vertical stack and sets dynamic margins between them.
For example, the margin between a heading and a paragraph is smaller than the margin between a paragraph an image.