Site-footer

Minimal single-row footer: logo + nav links + copyright. Per the answered design question: minimal and extended are two separate components; for the multi-column form, use Site-footer-extended.

When to use

• Marketing sites with light footer content.
• Apps where the footer doesn't carry deep navigation.

For documentation sites or product surfaces with extensive footer links (GitHub-style), use Site-footer-extended.

Anatomy

<footer class="site-footer">
  <a class="site-footer__logo" href="/">Malevich</a>

  <nav class="site-footer__nav" aria-label="Footer">
    <a href="/manifesto">Manifesto</a>
    <a href="/license">License</a>
    <a href="/contact">Contact</a>
  </nav>

  <p class="site-footer__copyright">© 2026 Malevich.</p>
</footer>

Variants

Tokens used

• --color-surface-canvas — default background
• --color-ink-strong — inverse background
• --color-ink-strong, --color-ink-regular, --color-ink-subtle
• --color-border-muted — top border
• --space-inset-block-l, --space-inset-section-m
• --space-gap-elements-m
• --border-width-hairline
• --font-display-title-*, --font-heading-section-size, --font-body-support-*, --font-caption-*
• --motion-fast, --motion-easing-default

Accessibility

• Use <footer> as the wrapper for the page-level footer.
• <nav aria-label="Footer"> identifies the footer-nav landmark.
• Provide visible copyright; assistive tech reads it after the nav.