Footer
| Prop | Type | Default |
|---|---|---|
| structure | 'spread' | 'row' | 'split' | 'column' | split |
| variant | 'base' | 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline' | subtle |
| frame | 'fill' | 'panel' | 'contain' | fill |
| align | 'start' | 'center' | 'end' | - |
| size | 'sm' | 'md' | 'lg' | sm |
| theme | 'light' | 'dark' | - |
| color | 'base' | 'brand' | - |
| space | 'none' | 'auto' | auto |
| compact | boolean | - |
| logo | string | - |
| heading | string | - |
| text | string | - |
| columns | [ | - |
| heading | string | - |
| links | ComponentProps<typeof Link>[] | - |
| as | HTMLTag | footer |
| HTML Attributes | Polymorphic<footer> | - |
Examples
---
import Footer from 'fulldev-ui/components/Footer.astro'
---
<Footer
heading="Fulldev UI"
text="Rapidly build content-driven websites."
align="start"
size="sm"
columns={[
{
heading: 'Pages',
links: [
{ href: '/overview/introduction', text: 'Docs' },
{ href: '/typography/heading', text: 'Components' },
{ href: '/blocks', text: 'Blocks' },
],
},
{
heading: 'Socials',
links: [
{ href: '/x', text: 'X' },
{ href: '/github', text: 'GitHub' },
{ href: '/discord', text: 'Discord' },
],
},
]}
/>
<Footer
heading="Fulldev UI"
text="Rapidly build content-driven websites."
align="start"
size="sm"
structure="spread"
columns={[
{
heading: 'Links',
links: [
{ href: '/overview/introduction', text: 'Docs' },
{ href: '/components', text: 'Components' },
{ href: '/discord', text: 'Discord' },
],
},
]}
/>
<Footer
heading="Fulldev UI"
text="Rapidly build content-driven websites."
align="start"
size="md"
structure="spread"
columns={[
{
heading: 'Links',
links: [
{ href: '/overview/introduction', text: 'Docs' },
{ href: '/components', text: 'Components' },
{ href: '/discord', text: 'Discord' },
],
},
]}
/>
<Footer
heading="Fulldev UI"
text="Rapidly build content-driven websites."
align="start"
size="lg"
structure="spread"
columns={[
{
heading: 'Links',
links: [
{ href: '/overview/introduction', text: 'Docs' },
{ href: '/components', text: 'Components' },
{ href: '/discord', text: 'Discord' },
],
},
]}
/>
---
import Footer from 'fulldev-ui/components/Footer.astro'
---
<Footer
variant="ghost"
structure="spread"
align="start"
heading="Fulldev UI"
text="Rapidly build content-driven websites."
columns={[
{
heading: 'Links',
links: [
{ href: '/overview/introduction', text: 'Docs' },
{ href: '/components', text: 'Components' },
{ href: '/discord', text: 'Discord' },
],
},
]}
/>
<Footer
variant="subtle"
structure="spread"
align="start"
heading="Fulldev UI"
text="Rapidly build content-driven websites."
columns={[
{
heading: 'Links',
links: [
{ href: '/overview/introduction', text: 'Docs' },
{ href: '/components', text: 'Components' },
{ href: '/discord', text: 'Discord' },
],
},
]}
/>
<Footer
variant="soft"
structure="spread"
align="start"
heading="Fulldev UI"
text="Rapidly build content-driven websites."
columns={[
{
heading: 'Links',
links: [
{ href: '/overview/introduction', text: 'Docs' },
{ href: '/components', text: 'Components' },
{ href: '/discord', text: 'Discord' },
],
},
]}
/>
<Footer
variant="surface"
structure="spread"
align="start"
heading="Fulldev UI"
text="Rapidly build content-driven websites."
columns={[
{
heading: 'Links',
links: [
{ href: '/overview/introduction', text: 'Docs' },
{ href: '/components', text: 'Components' },
{ href: '/discord', text: 'Discord' },
],
},
]}
/>
---
import Footer from 'fulldev-ui/components/Footer.astro'
---
<Footer
compact
frame="fill"
structure="spread"
align="start"
heading="Fulldev UI"
text="Rapidly build content-driven websites."
columns={[
{
heading: 'Links',
links: [
{ href: '/overview/introduction', text: 'Docs' },
{ href: '/components', text: 'Components' },
{ href: '/discord', text: 'Discord' },
],
},
]}
/>
<Footer
compact
frame="panel"
structure="spread"
align="start"
heading="Fulldev UI"
text="Rapidly build content-driven websites."
columns={[
{
heading: 'Links',
links: [
{ href: '/overview/introduction', text: 'Docs' },
{ href: '/components', text: 'Components' },
{ href: '/discord', text: 'Discord' },
],
},
]}
/>