Footer

The site/app footer — pure CSS, no JS. Two flavors from one component: marketing (default: brand zone + link columns + optional social row + optional newsletter + legal row) and app (--app, one thin row). Plus an optional giant brand decorative variant. Consumes .lb-btn, .lb-input-wrap, .lb-badge, .lb-icon-btn, and the brand icon set.

a11y (built in): the footer must be the page's single body-scoped <footer> rendered outside <main> — nested inside main/section it silently loses its contentinfo landmark. Each link column is a <nav aria-labelledby> pointing at its real heading. Icon-only social links carry aria-label names. Mobile collapse is plain stacking — no accordion. (Demo pages nest footers in boxes for display only.)

A · App footer — --app

One thin row for app shells: copyright left, links + status right. Uses the .lb-badge status slot. App shells often need no footer at all — ship this only when legal/status must stay visible.

B · Marketing footer — newsletter inline

The full flavor: brand zone (logo + tagline + social row), link columns (4 default; the grid handles 3–5), newsletter beside the columns, legal row. Column count is just how many nav.lb-footer__col you place.

C · Newsletter below + __giant brand

Same component, two options flipped on: the newsletter as its own full-width row (--row) between the columns and the legal row, and the decorative oversized wordmark (aria-hidden — pure ornament).

Usage

Pure CSS — nothing to init. Place the footer as a sibling of <main>, never inside it. The newsletter <form> ships unwired — bring your own submit handler (same rule as the media player's engine).

<footer class="lb-footer">
  <div class="lb-footer__inner">
    <div class="lb-footer__top">
      <div class="lb-footer__brandcol">
        <a class="lb-footer__brand" href="/"><span class="lb-footer__logo" data-lb-icon="letbe"></span> Brand</a>
        <p class="lb-footer__tagline">Tagline.</p>
        <div class="lb-footer__social">
          <a class="lb-icon-btn lb-icon-btn--ghost lb-icon-btn--small" href="#" aria-label="Brand on X"><span data-lb-icon="x-logo"></span></a>
        </div>
      </div>
      <div class="lb-footer__cols">
        <nav class="lb-footer__col" aria-labelledby="f-product">
          <h3 class="lb-footer__col-title" id="f-product">Product</h3>
          <ul class="lb-footer__list"><li><a class="lb-footer__link" href="#">…</a></li></ul>
        </nav>
        <!-- 3–5 columns: just add/remove nav.lb-footer__col -->
      </div>
      <!-- optional inline newsletter: .lb-footer__newsletter here -->
    </div>
    <!-- optional: .lb-footer__newsletter.lb-footer__newsletter--row (full-width) -->
    <!-- optional: <p class="lb-footer__giant" aria-hidden="true">Brand</p> -->
    <div class="lb-footer__legal">
      <span>© 2026 Brand</span>
      <div class="lb-footer__legal-links">
        <a class="lb-footer__link" href="#">Privacy</a>
        <span class="lb-badge lb-badge--success lb-badge--small"><span class="lb-badge__dot"></span> All systems normal</span>
      </div>
    </div>
  </div>
</footer>