Footer
A full-width site footer with the Zostel logo, organized link columns for brand, resources, and social media, plus a copyright line.
Preview
Usage
tsx
import { Footer } from "zostel-ui";
<Footer
columns={[
{
title: "Brand",
links: [
{ label: "About Us", href: "/about" },
{ label: "Careers", href: "/careers" },
{ label: "Blog", href: "/blog" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Resources",
links: [
{ label: "FAQs", href: "/faqs" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Privacy Policy", href: "/privacy" },
],
},
]}
socialLinks={[
{ platform: "instagram", href: "https://instagram.com/zostel" },
{ platform: "twitter", href: "https://twitter.com/zostel" },
{ platform: "youtube", href: "https://youtube.com/zostel" },
]}
copyright={`2013-${new Date().getFullYear()} Zostel Hospitality Pvt. Ltd.`}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | { title: string; links: { label: string; href: string }[] }[] | — | Link columns to display in the footer |
socialLinks | { platform: string; href: string }[] | — | Social media link icons |
copyright | string | — | Copyright text displayed at the bottom |
logo | ReactNode | — | Custom logo element (defaults to Zostel logo) |
tagline | string | — | Short tagline below the logo |
className | string | — | Additional CSS classes |
columnsType:
{ title: string; links: { label: string; href: string }[] }[]Default: —
Link columns to display in the footer
socialLinksType:
{ platform: string; href: string }[]Default: —
Social media link icons
copyrightType:
stringDefault: —
Copyright text displayed at the bottom
logoType:
ReactNodeDefault: —
Custom logo element (defaults to Zostel logo)
taglineType:
stringDefault: —
Short tagline below the logo
classNameType:
stringDefault: —
Additional CSS classes