Footer sectionPro
Site footer with link columns, newsletter, live status and socials.
What's inside
- Link columns
- Newsletter with success
- Live status
- Social links
When to use
- The bottom of every marketing page.
When not to use
- Inside apps: keep app footers minimal.
Installation
Usage
Import it from @/components/blocks/footer-section after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
import { FooterSection } from "@/components/blocks/footer-section";
<FooterSection brand="Acme" columns={[{ title: "Product", links: [{ label: "Pricing", href: "/pricing" }] }]} />API reference
FooterSection
A footer with brand, newsletter, link columns, status and socials. Also the default export.
| Prop | Type | Default | Description |
|---|---|---|---|
| brand / tagline | string | – | Brand name and line. |
| columns | { title; links: { label; href }[] }[] | – | Up to four columns. |
| status | string | – | Status pill text. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move through links and the newsletter |
Accessibility
- A footer landmark with a labelled nav; social links are named.
Motion
- Links underline on hover; newsletter swaps to a success line.
Responsive behavior
- Columns are 2-up on phones, 4-up from 640px.
Performance
- Animations start when the section scrolls into view.
- No data fetching; pass your copy as props.
Notes for AI
- Point the status pill at your real status page.
This page as Markdown, for assistants and coding agents:
/blocks/footer-section/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt