# Footer section

> Site footer with link columns, newsletter, live status and socials.

Block · Pro · https://lodeui.com/blocks/footer-section

## When to use

- The bottom of every marketing page.

## When not to use

- Inside apps: keep app footers minimal.

## Installation

```bash
npx shadcn@latest add @lode/footer-section
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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.

## Related

- [CTA section](https://lodeui.com/blocks/cta-section) — A dark closing call to action with meteors and an email capture.
- [Status page](https://lodeui.com/templates/status-page) — A public status page with subscribe, uptime per service and incident history.
- [Logo cloud](https://lodeui.com/blocks/logo-cloud) — Trusted-by logos as an endless strip or a static grid.