# Footer Wordmark

> Link columns on a dark ground with the brand set across the full width beneath.

- **Slug:** `footer-wordmark`
- **Kind:** section · **Category:** Site chrome
- **Source:** original to Viewership UI
- **Docs page:** https://viewership.ai/ui/components/footer-wordmark
- **All files in one bundle:** https://viewership.ai/ui/components/footer-wordmark.bundle.txt
- **Structured JSON:** https://viewership.ai/ui/components/footer-wordmark.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/ui/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/footer-wordmark/`:

   - `FooterWordmark.astro` (raw: https://viewership.ai/ui/raw/footer-wordmark/FooterWordmark.astro.txt)

npm packages: none.

## Usage

```astro
---
import FooterWordmark from "../components/viewership/footer-wordmark/FooterWordmark.astro";
---

<FooterWordmark />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import FooterWordmark from "./FooterWordmark.astro";
---

<FooterWordmark
  brand="Northwind"
  tagline="Gear for the long way round, repaired for life."
  legal="© 2026 Northwind Outdoor. A fictional brand for demonstration."
  columns={[
    { title: "Shop", links: [{ label: "Packs", href: "#" }, { label: "Shells", href: "#" }, { label: "Tents", href: "#" }] },
    { title: "Repair", links: [{ label: "Book a repair", href: "#" }, { label: "Repair promise", href: "#" }, { label: "Care guides", href: "#" }] },
    { title: "Company", links: [{ label: "About", href: "#" }, { label: "Journal", href: "#" }, { label: "Contact", href: "#" }] },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` | `string` |  | Brand name, set huge across the bottom. |
| `tagline` | `string` |  | One line beside the columns. |
| `columns` | `{ title: string; links: { label: string; href: string }[] }[]` |  | Link columns. |
| `legal` | `string` |  | Copyright or legal line. |

## Source

### `src/components/viewership/footer-wordmark/FooterWordmark.astro`

```astro
---
/**
 * FooterWordmark: link columns on a dark ground, with the brand name set
 * across the full width beneath. Sized to its container, so it never
 * overflows.
 *
 * @example
 * <FooterWordmark brand="Northwind" columns={[...]} legal="© 2026 Northwind" />
 */
interface FooterLink {
  label: string;
  href: string;
}
interface Column {
  title: string;
  links: FooterLink[];
}
interface Props {
  brand: string;
  tagline?: string;
  columns: Column[];
  legal?: string;
  class?: string;
}

const { brand, tagline, columns, legal, class: className } = Astro.props;
---

<footer class:list={["vs-footer-wordmark", className]}>
  <div class="vs-footer-wordmark__inner">
    <div class="vs-footer-wordmark__top">
      {tagline && <p class="vs-footer-wordmark__tagline">{tagline}</p>}
      <nav class="vs-footer-wordmark__cols" aria-label="Footer">
        {
          columns.map((c) => (
            <div>
              <h2 class="vs-footer-wordmark__col-title">{c.title}</h2>
              <ul>
                {c.links.map((l) => (
                  <li>
                    <a href={l.href}>{l.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))
        }
      </nav>
    </div>
    <a class="vs-display vs-footer-wordmark__giant" href="/">{brand}</a>
    {legal && <p class="vs-footer-wordmark__legal">{legal}</p>}
  </div>
</footer>

<style>
  .vs-footer-wordmark {
    container-type: inline-size;
    overflow: hidden;
    background: var(--vs-ink);
    color: var(--vs-ink-inverse);
    font-family: var(--vs-font-sans);
    font-stretch: var(--vs-font-stretch);
  }
  .vs-footer-wordmark__inner {
    max-width: var(--vs-container);
    margin-inline: auto;
    padding: clamp(40px, 7cqi, 80px) var(--vs-gutter) 24px;
  }
  .vs-footer-wordmark a {
    color: inherit;
    text-decoration: none;
  }
  .vs-footer-wordmark a:focus-visible {
    outline: none;
    box-shadow: var(--vs-focus-ring);
  }
  .vs-footer-wordmark__top {
    display: grid;
    gap: 36px;
  }
  .vs-footer-wordmark__tagline {
    max-width: 20rem;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.45;
  }
  .vs-footer-wordmark__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .vs-footer-wordmark__col-title {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--vs-ink-inverse) 55%, transparent);
  }
  .vs-footer-wordmark ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
  }
  .vs-footer-wordmark ul a:hover {
    color: var(--vs-accent);
  }
  .vs-footer-wordmark .vs-footer-wordmark__giant {
    display: block;
    margin-top: clamp(40px, 8cqi, 96px);
    font-size: clamp(3rem, 19cqi, 15rem);
    line-height: 0.82;
    white-space: nowrap;
    color: var(--vs-accent);
  }
  .vs-footer-wordmark__legal {
    margin: 24px 0 0;
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--vs-ink-inverse) 55%, transparent);
  }
  @container (min-width: 760px) {
    .vs-footer-wordmark__top {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: 64px;
    }
    .vs-footer-wordmark__cols {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
  }
</style>
```