Footer Section
Add a complete footer band to a composed page.
Preview
Import
import { FooterSection } from "@sigil-ui/components";Usage
<FooterSection
tagline="Token-driven design system."
groups={[
{ title: "Product", links: [{ label: "Docs", href: "#" }, { label: "Pricing", href: "#" }] },
{ title: "Company", links: [{ label: "About", href: "#" }, { label: "Blog", href: "#" }] },
]}
copyright="© 2026 Sigil"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
logo | ReactNode | — | Logo configuration. |
tagline | string | — | Tagline configuration. |
groups (required) | FooterLinkGroup[] | — | Groups configuration. |
socials | { label: string; href: string; icon: ReactNode }[] | — | Socials configuration. |
copyright | string | — | Copyright configuration. |
legal | { label: string; href: string }[] | — | Legal configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-footer-padding-y | Footer padding y |
--s-footer-border-top | Footer border top |
--s-content-max | Content max |
--s-page-margin | Page margin |
--s-footer-column-gap | Footer column gap |
--s-footer-row-gap | Footer row gap |
--s-footer-logo-height | Footer logo height |
--s-footer-link-size | Footer link size |
--s-text-muted | Text muted |
--s-footer-tagline-max-width | Footer tagline max width |
--s-footer-social-gap | Footer social gap |
--s-text | Text |