Footer

Description

.bp-footer uses auto-fit grid columns so the number of visible columns adapts to the available width without media queries. It has a brand/tagline slot, link group columns, and a bottom bar for copyright. All type scales fluidly via cqi units.

Usage

Full footer

<footer class="bp-footer">
<div class="bp-footer__inner">
  <div class="bp-footer__brand">
    <a href="/" class="bp-footer__logo">Be Partner DS</a>
    <p class="bp-footer__tagline">CSS-first. Token-driven. Framework-agnostic.</p>
  </div>
  <div>
    <h3 class="bp-footer__col-title">Design</h3>
    <ul class="bp-footer__links">
      <li><a class="bp-footer__link" href="/tokens/tokens/">Tokens</a></li>
      <li><a class="bp-footer__link" href="/tokens/grid/">Content Grid</a></li>
      <li><a class="bp-footer__link" href="/tokens/browser-support/">Browser Support</a></li>
    </ul>
  </div>
  <div>
    <h3 class="bp-footer__col-title">Components</h3>
    <ul class="bp-footer__links">
      <li><a class="bp-footer__link" href="/components/button/">Button</a></li>
      <li><a class="bp-footer__link" href="/components/card/">Card</a></li>
      <li><a class="bp-footer__link" href="/components/accordion/">Accordion</a></li>
      <li><a class="bp-footer__link" href="/components/modal/">Modal</a></li>
    </ul>
  </div>
  <div>
    <h3 class="bp-footer__col-title">Resources</h3>
    <ul class="bp-footer__links">
      <li><a class="bp-footer__link" href="https://github.com/bepartnerlabs">GitHub</a></li>
    </ul>
  </div>
</div>
<div class="bp-footer__bottom">
  <span>© 2026 BePartnerLabs</span>
</div>
</footer>

Public API

Variable	Default	Description
`--footer-bg`	`var(--bp-color-bg-subtle)`	Background color
`--footer-color`	`var(--bp-color-text-muted)`	Text and link color
`--footer-border`	`1px solid var(--bp-color-border)`	Top border

Customization example

Dark footer

<style>
.demo-footer--dark {
  --footer-bg: var(--bp-color-text);
  --footer-color: var(--bp-color-text-muted);
  --footer-border: none;
}
.demo-footer--dark .bp-footer__logo,
.demo-footer--dark .bp-footer__col-title { color: var(--bp-color-text-inverse); }
.demo-footer--dark .bp-footer__bottom { border-color: var(--bp-color-border); }
</style>
<footer class="bp-footer demo-footer--dark">
<div class="bp-footer__inner">
  <div class="bp-footer__brand">
    <a href="/" class="bp-footer__logo">Be Partner DS</a>
    <p class="bp-footer__tagline">CSS-first design system.</p>
  </div>
  <div>
    <p class="bp-footer__col-title">Links</p>
    <ul class="bp-footer__links">
      <li><a class="bp-footer__link" href="#">Tokens</a></li>
      <li><a class="bp-footer__link" href="#">Components</a></li>
    </ul>
  </div>
</div>
<div class="bp-footer__bottom">
  <span>© 2026 BePartnerLabs</span>
</div>
</footer>

Accessibility

Wrap in <footer> — it has an implicit contentinfo landmark role.
Link group headings use <h3 class="bp-footer__col-title"> by default. Adjust the heading level (h2–h4) to fit your document hierarchy — the class controls visual size, not the element.
Ensure sufficient color contrast between --footer-color and --footer-bg.

Browser APIs

API	Availability	Used for	Without it	Polyfill
`auto-fit` grid	Widely available Baseline 2020	Responsive columns without media queries	Fixed column count	None needed
Container Queries / `cqi`	Widely available Baseline 2023	Fluid type scaling inside the footer	Fixed font-size from tokens	None needed

Internals

--_bg, --_color, --_border — component-private, do not set directly.