FooterBottom section with links or info.
Footer
import Footer, { FooterColumn, FooterTitle, FooterLink} from '@/components/Footer'; export function Example() { return ( <Footer> <FooterColumn> <FooterTitle>Lorem</FooterTitle> <FooterLink href="/ipsum">Ipsum</FooterLink> <FooterLink href="/dolor">Dolor</FooterLink> </FooterColumn> <FooterColumn> <FooterTitle>Sit Amet</FooterTitle> <FooterLink href="/consectetur">Consectetur</FooterLink> <FooterLink href="/adipiscing">Adipiscing</FooterLink> </FooterColumn> </Footer> );}
Footer ($cols)
import Footer, { FooterColumn, FooterTitle } from '@/components/Footer'; export function Example() { return ( <Footer $cols={6}> <FooterColumn> <FooterTitle>Lorem</FooterTitle> </FooterColumn> <FooterColumn> <FooterTitle>Ipsum</FooterTitle> </FooterColumn> <FooterColumn> <FooterTitle>Dolor</FooterTitle> </FooterColumn> <FooterColumn> <FooterTitle>Sit</FooterTitle> </FooterColumn> <FooterColumn> <FooterTitle>Amet</FooterTitle> </FooterColumn> <FooterColumn> <FooterTitle>Consectetur</FooterTitle> </FooterColumn> </Footer> );}
Footer (with FooterBar)
import Footer, { FooterColumn, FooterTitle, FooterLink, FooterBar, FooterBarRight} from '@/components/Footer'; export function Example() { return ( <Footer> <FooterColumn> <FooterTitle>Lorem</FooterTitle> <FooterLink href="/ipsum">Ipsum</FooterLink> <FooterLink href="/dolor">Dolor</FooterLink> </FooterColumn> <FooterColumn> <FooterTitle>Sit Amet</FooterTitle> <FooterLink href="/consectetur">Consectetur</FooterLink> <FooterLink href="/adipiscing">Adipiscing</FooterLink> </FooterColumn> <FooterBar> © 2024 Lorem Ipsum. All rights reserved. <FooterBarRight> <FooterLink href="/privacy">Privacy</FooterLink> <FooterLink href="/terms">Terms</FooterLink> </FooterBarRight> </FooterBar> </Footer> );}
FooterColumn ($firstOnMobile)
import Footer, { FooterColumn, FooterTitle, FooterLink} from '@/components/Footer'; export function Example() { return ( <Footer> <FooterColumn> <FooterTitle>Lorem</FooterTitle> <FooterLink href="/ipsum">Ipsum</FooterLink> </FooterColumn> <FooterColumn $firstOnMobile> <FooterTitle>Important</FooterTitle> <FooterLink href="/contact">Contact</FooterLink> </FooterColumn> <FooterColumn> <FooterTitle>Dolor</FooterTitle> <FooterLink href="/sit">Sit</FooterLink> </FooterColumn> </Footer> );}