Footer
Page footer with links
Overview
A flexible compound footer. When Footer.Brand is present among children, the layout switches to a two-column grid (brand left, content right). Without Footer.Brand, all children stack vertically.
Usage
import { Footer } from '@leanicon/web-builder-library'Default (full footer)
Brand with logo, column groups for navigation, social links, a highlight CTA, and legal section.
Simple (no brand)
Without Footer.Brand, content stacks vertically.
Minimal
Social links and legal only — no columns or brand.
With highlight CTA
Footer.Highlight renders a freeform area — useful for a CTA card, newsletter signup, or any custom content.
Dark mode
Simple — dark mode
Minimal — dark mode
Sub-components
Sub-component | Props | Description |
|---|---|---|
|
| Logo + optional tagline / legal section |
|
| Navigation column with heading |
|
| Grid wrapper for columns (4-up by default) |
|
| Stacked social platform links |
|
| Copyright text + optional legal links |
|
| Freeform highlight area (CTA, newsletter) |
Props
Prop | Type | Default | Description |
|---|---|---|---|
|
| — | Sub-components (required) |
|
| — | Force light or dark mode |
|
| — | Additional CSS classes on root |
Notes
- When
Footer.Brandis present, the layout uses alg:grid-cols-[1fr_3fr]two-column grid. - Without
Footer.Brand, all children stack vertically withspace-y-12. Footer.ColumnGroupdefaults to a 4-column grid onmd+.- All links use
#in docs previews to prevent navigation. - Dark mode: pass
colorScheme="dark"or place inside a.darkancestor.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
colorScheme | enum | — | No | |
className | string | — | No | |
logo | ReactNode | — | Yes | |
title | string | — | Yes | |
links | FooterLink[] | — | Yes | |
copyright | string | — | Yes |