# Footer

> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/footer

The `.footer` component is the site-wide bottom section: link columns on the right, a meta area (copyright, credits, version…) on the left. Pure HTML and CSS, no JavaScript.

<Footer style="border-radius: 0 0 var(--radius-lg) var(--radius-lg);">
  <ul>
    <li>
      <h2 class="h5">Product</h2>
      <ul>
        <li><a href="#">Features</a></li>
        <li><a href="#">Pricing</a></li>
      </ul>
    </li>
    <li>
      <h2 class="h5">Company</h2>
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </li>
  </ul>
  <Fragment slot="meta">
    <p class="mt-xs1">© 2026 Acme Inc.</p>
  </Fragment>
</Footer>

<div class="docs_oversizedTable">

| File                                | Description                    | Source      |
| ----------------------------------- | ------------------------------ | ----------- |
| `component.footer.css`              | All footer styles              | [Github][1] |
| `Footer.astro`                      | The Astro component            | [Github][2] |
| `--footer-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] |

</div>

[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.footer.css
[2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Footer.astro
[3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css

## HTML

The footer expects two regions: a `nav` with one `<ul>` whose `<li>` children are the columns (a heading plus a link list each), and a `.footer_meta` section.

Pick a real heading level for the column titles: the next one in your page's outline (usually `h2`), sized down with a [heading helper class](/docs/helpers) like `.h5`. Jumping straight to an `h5` for its looks would leave a heading-level gap for screen-reader users on every page.

```html
<footer class="footer">
  <nav class="footer_nav" aria-label="Footer">
    <ul>
      <li>
        <h2 class="h5">Documentation</h2>
        <ul>
          <li><a href="/docs">Getting started</a></li>
          <li><a href="/docs/tokens">Tokens</a></li>
        </ul>
      </li>
      <li>
        <h2 class="h5">Connect</h2>
        <ul>
          <li><a href="https://github.com/…">Github</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <section class="footer_meta">
    <p>© 2026 Acme Inc.</p>
  </section>
</footer>
```

### Custom properties

The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):

<div class="docs_oversizedTable">

| Property                    | Description                                     |
| --------------------------- | ----------------------------------------------- |
| `--footer-background-color` | Background color.                               |
| `--footer-text-color`       | Text color.                                     |
| `--footer-border-width`     | Top border width.                               |
| `--footer-border-color`     | Top border color (transparent in light theme).  |
| `--footer-link-color`       | Link color.                                     |
| `--footer-link-color-hover` | Link hover color.                               |

</div>

## Astro component

<div class="docs_oversizedTable">

| Prop       | Type     | Default     | Description                                                         |
| ---------- | -------- | ----------- | ------------------------------------------------------------------- |
| `navLabel` | `string` | `"Footer"`  | `aria-label` for the footer nav.                                    |
| `class`    | `string` | `undefined` | Additional CSS classes, useful for [helper classes](/docs/helpers). |

</div>

Any other attribute is passed through to the root `<footer>` element.

<div class="docs_oversizedTable">

| Slot      | Description                                                                 |
| --------- | --------------------------------------------------------------------------- |
| (default) | The link columns: one `<ul>` with one `<li>` per column (heading + `<ul>`). |
| `meta`    | The meta area: copyright, credits, socials…                                  |

</div>

## Examples

<ul class="docs_examples">
  <li>
    <Footer style="border-radius: var(--radius-lg);">
      <ul>
        <li>
          <h2 class="h5">Product</h2>
          <ul>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
          </ul>
        </li>
        <li>
          <h2 class="h5">Company</h2>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
        </li>
      </ul>
      <Fragment slot="meta">
        <p class="mt-xs1">© 2026 Acme Inc.</p>
      </Fragment>
    </Footer>

    ```astro
    ---
    import Footer from "../components/Footer.astro";
    ---
    <Footer>
      <ul>
        <li>
          <h2 class="h5">Product</h2>
          <ul>
            <li><a href="/features">Features</a></li>
            <li><a href="/pricing">Pricing</a></li>
          </ul>
        </li>
      </ul>
      <Fragment slot="meta">
        <p>© 2026 Acme Inc.</p>
      </Fragment>
    </Footer>
    ```

  </li>
  <li>
    This site's own footer is the same component; see [SiteFooter.astro](https://github.com/minimaldesign/mCSS/blob/main/src/components/SiteFooter.astro) for a full example with social icons and a version line in the `meta` slot.
  </li>
</ul>