Footer
💡
Folder location:
src/components/footer
Examples
import Link from 'next/link'
import Image from 'next/image'
import {
Footer1,
FooterApps,
FooterContact,
FooterLinksWidget,
FooterSocialLinks,
} from 'components/footer'
import { Paragraph } from 'components/Typography'
export default function Example1({ footer }) {
return (
<Footer1>
<Footer1.Brand>
<Link href="/">
<Image src={footer.logo} alt="logo" width={105} height={50} />
</Link>
<Paragraph mt={1} mb={3} color="grey.500" maxWidth={370}>
{footer.description}
</Paragraph>
<FooterApps
playStoreUrl={footer.playStoreUrl}
appleStoreUrl={footer.appStoreUrl}
/>
</Footer1.Brand>
<Footer1.Widget1>
<FooterLinksWidget title="About Us" links={footer.about} />
</Footer1.Widget1>
<Footer1.Widget2>
<FooterLinksWidget title="Customer Care" links={footer.customers} />
</Footer1.Widget2>
<Footer1.Contact>
<FooterContact
phone={footer.contact.phone}
email={footer.contact.email}
address={footer.contact.address}
/>
<FooterSocialLinks links={footer.socials} />
</Footer1.Contact>
</Footer1>
)
}
import Box from '@mui/material/Box'
import LazyImage from 'components/LazyImage'
import { Paragraph } from 'components/Typography'
import {
Footer3,
FooterApps,
FooterContact,
FooterLinksWidget,
FooterSocialLinks,
} from 'components/footer'
export default function Example2({ footer }) {
return (
<Fragment>
<Footer3>
<Footer3.Brand>
<Box maxWidth={100}>
<LazyImage src={footer.logo} alt="logo" width={105} height={50} />
</Box>
<Paragraph mb={2.5} maxWidth={{ xl: 400 }}>
{footer.description}
</Paragraph>
</Footer3.Brand>
<Footer3.Widget1>
<FooterLinksWidget isDark title="About Us" links={footer.about} />
</Footer3.Widget1>
<Footer3.Widget2>
<FooterLinksWidget
isDark
title="Customer Care"
links={footer.customers}
/>
</Footer3.Widget2>
<Footer3.Contact>
<FooterContact
color="inherit"
phone={footer.contact.phone}
email={footer.contact.email}
address={footer.contact.address}
/>
</Footer3.Contact>
</Footer3>
<FooterCopyright>
<FooterSocialLinks variant="dark" links={footer.socials} />
</FooterCopyright>
</Fragment>
)
}
Views
Example-1
![](/footer/footer-1.png)
Example-2
![](/footer/footer-4.png)
Used
Props
Name | Type | Required | Default |
---|---|---|---|
children | ReactNode | Yes | - |