Footer — Vanilla

Footer component

A simple footer with role="contentinfo", optional site name, copyright year, and an optional list of links. Uses BEM classes: footer, footer__container, footer__inner, footer__copyright, footer__site-name, footer__year, footer__nav, footer__links, footer__link-item, footer__link.

Add this component

The command below includes <strong>Footer</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add Footer

bash bash Copy code

pnpm dlx rizzo-css add Footer

bash bash Copy code

npx rizzo-css add Footer

bash bash Copy code

bunx rizzo-css add Footer

BEM / attributes

• footer — root; use role="contentinfo"
• footer__container — max-width wrapper
• footer__inner — flex row (copyright + nav)
• footer__copyright, footer__site-name, footer__year
• footer__nav (aria-label="Footer"), footer__links, footer__link-item, footer__link

Live example

Copyable HTML

<footer class="footer" role="contentinfo">
  <div class="footer__container">
    <div class="footer__inner">
      <p class="footer__copyright">
        <span class="footer__site-name">My Site</span> · <span class="footer__year">© 2026</span>
      </p>
      <nav class="footer__nav" aria-label="Footer">
        <ul class="footer__links">
          <li class="footer__link-item"><a class="footer__link" href="/privacy">Privacy</a></li>
          <li class="footer__link-item"><a class="footer__link" href="/terms">Terms</a></li>
        </ul>
      </nav>
    </div>
  </div>
</footer>