Cmpnts

Menu

Organisms

Footer

The band at the bottom of a page or app, with site links, legal text and contact details.

© 2026 Woodland Plants

Code
HTML
<div class="footer">
  <div class="footer__bar">
    <p class="small-text text-muted">© 2026 Woodland Plants</p>
    <nav aria-label="Footer, example">
      <ul class="cluster small-text" role="list">
        <li><a href="/accessibility" class="link">Accessibility</a></li>
        <li><a href="/privacy" class="link">Privacy</a></li>
      </ul>
    </nav>
  </div>
</div>

Why it exists

People who reach the bottom of a page are often looking for something specific: contact details, an accessibility statement, the small print. A Footer puts those where they expect them, in a real <footer> that a screen reader can jump to as the contentinfo landmark.

It works as the Header does. The band and its rows are all it draws, and its bars share the site width, so the top and bottom of a page line up. It has no columns of its own: a set of link lists is a Grid, which already reflows.

The arrangement is a choice about what comes first. One row suits a short Footer. Stacked suits a site whose links matter more than its legal line, and it keeps source order, so reading order and visual order match.

When to use

  • Once per page, at the bottom, for site links and legal text.
  • Not for a Card’s or a section’s own closing row: that is .card__footer.
  • Not for actions on the page: those go in the content or a Button Group.

Rules

  • Landmark: a <footer> directly in <body> (or .app) is the contentinfo landmark: one per page, no aria-label. A <footer> inside <article> or <section> isn’t a landmark. Site link lists are a <nav> labelled by their heading.

On a real page the band is a <footer>. It is a <div> in these demos so that this page keeps one contentinfo landmark.

HTML
<footer class="footer">
  <div class="footer__bar">
    <p class="small-text text-muted">© 2026 Woodland Plants</p>
    <nav aria-label="Footer">
      <ul class="cluster small-text" role="list">
        <li><a href="/accessibility" class="link">Accessibility</a></li>
        <li><a href="/privacy" class="link">Privacy</a></li>
      </ul>
    </nav>
  </div>
</footer>

The parts in a column, in source order.

© 2026 Woodland Plants

Code
HTML
<div class="footer footer--stacked">
  <div class="footer__bar">
    <nav aria-label="Footer, stacked example">
      <ul class="cluster small-text" role="list">
        <li><a href="/accessibility" class="link">Accessibility</a></li>
        <li><a href="/privacy" class="link">Privacy</a></li>
      </ul>
    </nav>
    <p class="small-text text-muted">© 2026 Woodland Plants</p>
  </div>
</div>

Link Lists, Then Legal Text

Link lists, then legal text.

© 2026 Woodland Plants

Code
HTML
<div class="footer">
  <div class="footer__bar">
    <div class="grid grid--3-col grid--2xs">
      <nav aria-labelledby="footer-shop" class="stack">
        <h3 id="footer-shop" class="micro-heading">Shop</h3>
        <ul class="stack gap-xs small-text" role="list">
          <li><a href="/plants" class="link link--plain">Plants</a></li>
          <li><a href="/borders" class="link link--plain">Borders</a></li>
        </ul>
      </nav>
      <nav aria-labelledby="footer-help" class="stack">
        <h3 id="footer-help" class="micro-heading">Help</h3>
        <ul class="stack gap-xs small-text" role="list">
          <li><a href="/delivery" class="link link--plain">Delivery</a></li>
          <li><a href="/returns" class="link link--plain">Returns</a></li>
        </ul>
      </nav>
      <nav aria-labelledby="footer-about" class="stack">
        <h3 id="footer-about" class="micro-heading">About</h3>
        <ul class="stack gap-xs small-text" role="list">
          <li><a href="/nursery" class="link link--plain">Nursery</a></li>
          <li><a href="/contact" class="link link--plain">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="footer__bar">
    <p class="small-text text-muted">© 2026 Woodland Plants</p>
  </div>
</div>

Do and Don’t

DoDon’t
Use one <footer> directly in <body> or .app.Label the contentinfo landmark with aria-label.
Use two __bars for two rows.Add padding or border utilities to the Footer.
Use --stacked when the site links come first.Reorder the parts with CSS.
Label each list of site links by its heading.Leave several <nav>s with no names.

In Storybook

See also

  • Header: The band at the top of a page or app, holding the Brand, the main navigation and global actions.
  • App Shell: The page shell that places the Header, main and footer in rows, with side panes beside the main.
  • Grid: Columns that fill the width and reflow on their own, or a row that scrolls and snaps.
  • Stack, Inline and Cluster: One-dimensional flows that space their children in a column, a row or a wrapping row.

Search the docs