Footer
Component is used to display a footer at the bottom of the page.
---import { Button, Column, Footer, Heading, Paragraph } from 'fulldev-ui'---
<Footer structure="spread" size="sm"> <Column align="start"> <Heading as="a" href="/">Fulldev UI</Heading> <Paragraph>Rapidly build content-driven websites.</Paragraph> </Column> <Column> <Button variant="link" href="/overview/introduction">Docs</Button> <Button variant="link" href="/components">Components</Button> <Button variant="link" href="/discord">Discord</Button> </Column></Footer>
Props
Prop | Type | Default |
---|---|---|
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.
---import { Button, Column, Footer, Heading, Paragraph } from 'fulldev-ui'---
<Footer structure="spread" align="start" size="sm"> <Column align="start"> <Heading as="a" href="/">Fulldev UI</Heading> <Paragraph>Rapidly build content-driven websites.</Paragraph> </Column> <Column> <Button variant="link" href="/overview/introduction">Docs</Button> <Button variant="link" href="/components">Components</Button> <Button variant="link" href="/discord">Discord</Button> </Column></Footer>
<Footer structure="spread" align="start" size="md"> <Column align="start"> <Heading as="a" href="/">Fulldev UI</Heading> <Paragraph>Rapidly build content-driven websites.</Paragraph> </Column> <Column> <Button variant="link" href="/overview/introduction">Docs</Button> <Button variant="link" href="/components">Components</Button> <Button variant="link" href="/discord">Discord</Button> </Column></Footer>
<Footer structure="spread" align="start" size="lg"> <Column align="start"> <Heading as="a" href="/">Fulldev UI</Heading> <Paragraph>Rapidly build content-driven websites.</Paragraph> </Column> <Column> <Button variant="link" href="/overview/introduction">Docs</Button> <Button variant="link" href="/components">Components</Button> <Button variant="link" href="/discord">Discord</Button> </Column></Footer>
variant
Sets the color variant used for this component and all its children.
---import { Button, Column, Footer, Heading, Paragraph } from 'fulldev-ui'---
<Footer variant="ghost" structure="spread" align="start"> <Column align="start"> <Heading as="a" href="/">Fulldev UI</Heading> <Paragraph>Rapidly build content-driven websites.</Paragraph> </Column> <Column> <Button variant="link" href="/overview/introduction">Docs</Button> <Button variant="link" href="/components">Components</Button> <Button variant="link" href="/discord">Discord</Button> </Column></Footer>
<Footer variant="subtle" structure="spread" align="start"> <Column align="start"> <Heading as="a" href="/">Fulldev UI</Heading> <Paragraph>Rapidly build content-driven websites.</Paragraph> </Column> <Column> <Button variant="link" href="/overview/introduction">Docs</Button> <Button variant="link" href="/components">Components</Button> <Button variant="link" href="/discord">Discord</Button> </Column></Footer>
<Footer variant="soft" structure="spread" align="start"> <Column align="start"> <Heading as="a" href="/">Fulldev UI</Heading> <Paragraph>Rapidly build content-driven websites.</Paragraph> </Column> <Column> <Button variant="link" href="/overview/introduction">Docs</Button> <Button variant="link" href="/components">Components</Button> <Button variant="link" href="/discord">Discord</Button> </Column></Footer>
<Footer variant="surface" structure="spread" align="start"> <Column align="start"> <Heading as="a" href="/">Fulldev UI</Heading> <Paragraph>Rapidly build content-driven websites.</Paragraph> </Column> <Column> <Button variant="link" href="/overview/introduction">Docs</Button> <Button variant="link" href="/components">Components</Button> <Button variant="link" href="/discord">Discord</Button> </Column></Footer>
frame
---import { Button, Column, Footer, Heading, Paragraph } from 'fulldev-ui'---
<Footer compact frame="fill" structure="spread" align="start"> <Column align="start"> <Heading as="a" href="/">Fulldev UI</Heading> <Paragraph>Rapidly build content-driven websites.</Paragraph> </Column> <Column> <Button variant="link" href="/overview/introduction">Docs</Button> <Button variant="link" href="/components">Components</Button> <Button variant="link" href="/discord">Discord</Button> </Column></Footer>
<Footer compact frame="panel" structure="spread" align="start"> <Column align="start"> <Heading as="a" href="/">Fulldev UI</Heading> <Paragraph>Rapidly build content-driven websites.</Paragraph> </Column> <Column> <Button variant="link" href="/overview/introduction">Docs</Button> <Button variant="link" href="/components">Components</Button> <Button variant="link" href="/discord">Discord</Button> </Column></Footer>
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.