# Marketing Footer

> The wordmark and its tagline beside titled columns of links, then a last row with the copyright, a short note and the legal links.

Source: https://ritla.app/ui/marketing-footer

## Installation

Installing from the registry is coming soon. Until then, these are the commands you will run.

```bash
npx ritla add marketing-footer
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/marketing-footer
```

## Usage

```tsx
import { MarketingFooter } from "@/components/ui/marketing-footer";

<MarketingFooter
  logo={<Wordmark />}
  tagline="Thoughtfully Arabic. Naturally bilingual."
  groups={[{ title: "Product", links: [{ label: "Components", href: "/ui" }] }]}
  copyright="© 2026 Ritla"
  legal={[{ label: "Privacy", href: "/legal/privacy" }]}
/>
```

## API reference

### `MarketingFooter`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `logo` | `ReactNode` | None | The wordmark, linked home. |
| `tagline` | `ReactNode` | None | One or two lines under the wordmark. |
| `groups` | `{ title, links: { label, href, lang? }[] }[]` | None | Columns of links, each under its title. |
| `copyright` | `ReactNode` | None | The last row's start: “© 2026 Ritla”. |
| `note` | `ReactNode` | None | A short line in the middle of the last row. |
| `legal` | `{ label, href, lang? }[]` | None | The legal links at the last row's end. |

## Accessibility

Keyboard (keys as in left-to-right; arrows swap in right-to-left):

- `Tab`: The wordmark, the links column by column, then the legal links.

ARIA:

- The footer is the page's contentinfo landmark (`footer`), and each column has a level 2 heading.
- Product names that stay Latin on an Arabic page carry `lang="en"`.

## Arabic and RTL notes

Mirrors:

- The wordmark's column at the line's start on the right, the columns following to its left.

Does not mirror:

- The wordmark itself is Latin and never mirrors.

Numerals: The year in the copyright is as you write it.

Arabic typography: Titles `label-14` Semibold, links `body-14`, the last row `body-12`.
