Skip to content
Fulldev UI

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.