Site-footer-extended

Multi-column footer with category groups of links and a bottom row for logo + copyright + legal links. The GitHub/Apple-style expanded form per the answered design question.

For a minimal single-row footer, use Site-footer.

When to use

• Documentation sites with extensive footer navigation.
• Marketing sites with multiple product categories or org structures.
• Anywhere link density justifies a wide footer.

Anatomy

<footer class="site-footer-extended">
  <div class="site-footer-extended__columns">
    <div class="site-footer-extended__column">
      <h3 class="site-footer-extended__column-title">Product</h3>
      <ul class="site-footer-extended__column-list">
        <li><a href="/components">Components</a></li>
        <li><a href="/tokens">Tokens</a></li>
        <li><a href="/themes">Themes</a></li>
      </ul>
    </div>
    <div class="site-footer-extended__column">
      <h3 class="site-footer-extended__column-title">Resources</h3>
      <ul class="site-footer-extended__column-list">
        <li><a href="/docs">Docs</a></li>
        <li><a href="/guides">Guides</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </div>
    <div class="site-footer-extended__column">
      <h3 class="site-footer-extended__column-title">Community</h3>
      <ul class="site-footer-extended__column-list">
        <li><a href="https://github.com/…">GitHub</a></li>
        <li><a href="/discord">Discord</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </div>
  </div>

  <div class="site-footer-extended__bottom">
    <a class="site-footer-extended__logo" href="/">Malevich</a>
    <p class="site-footer-extended__copyright">© 2026 Malevich.</p>
    <nav class="site-footer-extended__legal" aria-label="Legal">
      <a href="/privacy">Privacy</a>
      <a href="/terms">Terms</a>
      <a href="/license">License</a>
    </nav>
  </div>
</footer>

The columns grid uses auto-fit + minmax(12rem, 1fr) so columns reflow gracefully as the viewport shrinks — no breakpoint queries.

Variants

Tokens used

• --color-surface-canvas / --color-ink-strong (inverse bg)
• --color-ink-strong, --color-ink-regular, --color-ink-subtle, --color-ink-inverse
• --color-border-muted — top + inner borders
• --space-inset-section-{m,l}, --space-inset-block-m
• --space-gap-elements-{s,m}, --space-gap-blocks-l
• --border-width-hairline
• --font-overline-* — column titles (uppercase tracking)
• --font-body-support-* — column list links
• --font-caption-* — copyright + legal
• --font-display-title-*, --font-heading-section-size — logo
• --motion-fast, --motion-easing-default

Accessibility

• Use <footer> for the page-level wrapper.
• Column titles use real <h3> so screen readers can navigate between categories.
• Legal links carry <nav aria-label="Legal"> to distinguish from primary navigation in the columns.
• Grid auto-collapse keeps source order matching reading order.