# Footer

Source: https://iriscss.com/documentation/components/footer/

A page footer with link columns that works on mobile and desktop.

Add `class="footer"` to the page `footer`. Everything inside is plain HTML. The element that holds the `nav` elements becomes the column grid, and its first child is the brand when it is not a `nav`. The element right after the grid is the bottom row, for the copyright and credits.

```html
<footer class="footer">
  <div class="container-fluid">
    <div>
      <div>
        <a href="#"><img src="/favicon.svg" alt=""> Brand</a>
        <p>A short line about your project.</p>
      </div>
      <nav aria-label="Product">
        <h2>Product</h2>
        <ul>
          <li><a href="#">Features</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Changelog</a></li>
        </ul>
      </nav>
      <nav aria-label="Company">
        <h2>Company</h2>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <p>&copy; 2026 Brand. All rights reserved.</p>
      <p><a href="#">Privacy</a> and <a href="#">terms</a></p>
    </div>
  </div>
</footer>
```

## Mobile and desktop

The footer measures its own width, not the screen. Columns sit side by side while they fit and wrap to new rows when they don't. Below 48rem the brand gets a row of its own, links get more room to tap and the bottom row stacks. The example above is narrower than 48rem, so it shows the phone layout. Resize the window to see both layouts in this site's own footer.

On phones with a home indicator, the bottom padding grows to keep the content clear of it.

## Simple footer

Without a `nav`, the footer is a plain band for a line or two of text.

```html
<footer class="footer">
  <div class="container-fluid">
    <p>&copy; 2026 Brand. Made with plain HTML.</p>
  </div>
</footer>
```

## Sticky

`.sticky` keeps the footer at the bottom of the window when the page is shorter than the screen. On longer pages it sits after the content as usual. The footer must be a direct child of `body`, which becomes a flex column. In a flex column the margins of the other children no longer collapse, so check the spacing of your page sections.

```html
<footer class="footer sticky">...</footer>
```

## Colors

A color class fills the band. Text, headings and links switch to the band's text color.

```html
<footer class="footer contrast">
  <div class="container-fluid">
    <div>
      <div>
        <a href="#">Brand</a>
      </div>
      <nav aria-label="Contrast example">
        <h2>Links</h2>
        <ul>
          <li><a href="#">Docs</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <p>&copy; 2026 Brand</p>
    </div>
  </div>
</footer>
<footer class="footer primary">
  <div class="container-fluid">
    <p>&copy; 2026 Brand</p>
  </div>
</footer>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-footer-padding-block` | `2.5rem` |
| `--i-footer-font-size` | `0.9375rem` |
| `--i-footer-gap` | `2rem` |
| `--i-footer-column-min-width` | `8rem` |
| `--i-footer-heading-font-size` | `0.8125rem` |
| `--i-footer-brand-font-size` | `1.25rem` |
| `--i-footer-brand-image-height` | `1.75rem` |
| `--i-footer-color-background` | `color-mix(in oklab, var(--i-color-subtle) 7%, var(--i-color-background))` |
| `--i-footer-color-border` | `var(--i-color-subtle-border)` |
| `--i-footer-color-text` | `var(--i-color-subtle)` |