SiteFooter

The footer closes every page: the stacked logo linking home with a short tagline, link columns under eyebrow headings, and a base line with legal text in caption/muted. From 48rem of its own width the logo and the columns sit side by side.

Columns and legal lineDark · Grafite

Columns and legal lineLight · Gelo

Usage

Do

Keep column headings to one or two words (they render as eyebrows).
Put the CNPJ and the copyright in the legal line.
Mark links that open a new tab with external: true.

Don't

Repeat the whole navigation in long columns.
Add social icons or decorative images.
State facts the company has not confirmed (clients, certifications, response times).

Astro

---
import SiteFooter from '@monk-business/astro/SiteFooter.astro';
---

<SiteFooter
  tagline="Integrações de telecom, software e IA para quem não pode parar."
  columns={[
    { title: 'Empresa', links: [{ label: 'Sobre', href: '/sobre/' }, { label: 'Contato', href: '/contato/' }] },
    { title: 'Contato', links: [{ label: 'WhatsApp', href: 'https://wa.me/55…', external: true }] },
  ]}
  legal={['© 2026 Monk Business', 'CNPJ 44.205.879/0001-83']}
  legalLinks={[{ label: 'Privacidade', href: '/privacidade/' }]}
/>

HTML

<footer class="mb-footer">
  <div class="mb-container mb-footer__main">
    <div class="mb-footer__brand">
      <a class="mb-footer__logo" href="/" aria-label="Monk Business, página inicial">
        <img src="/logo-stacked-on-dark.svg" alt="" width="148" height="54" />
      </a>
      <p class="mb-footer__tagline">Integrações de telecom, software e IA para quem não pode parar.</p>
    </div>
    <nav class="mb-footer__nav" aria-label="Rodapé">
      <div>
        <h2 class="mb-eyebrow">Empresa</h2>
        <ul class="mb-footer__list" role="list">
          <li><a class="mb-footer__link" href="/sobre/">Sobre</a></li>
        </ul>
      </div>
    </nav>
  </div>
  <div class="mb-footer__base">
    <div class="mb-container mb-footer__base-inner">
      <p>© 2026 Monk Business</p>
      <ul class="mb-footer__legal-links" role="list">
        <li><a class="mb-footer__link" href="/privacidade/">Privacidade</a></li>
      </ul>
    </div>
  </div>
</footer>

Props

SiteFooter props
Prop	Type	Default	Description
`homeHref`	`string`	`'/'`	Home link of the logo.
`homeLabel`	`string`	`'Monk Business, página inicial'`	Accessible name of the logo link.
`tagline`	`string`	—	One or two short lines under the logo.
`columns`	`FooterColumn[]`	—	Link columns.
`navLabel`	`string`	`'Rodapé'`	Accessible name of the footer navigation.
`legal`	`string[]`	—	Lines of the base row, e.g. "© 2026 Monk Business". The `legal` slot replaces them.
`legalLinks`	`FooterLink[]`	—	Links at the end of the base row (privacy, brand).
`externalLabel`	`string`	`'(abre em nova aba)'`	Visually hidden note added to external links.
`logoTone`	`Exclude<LogoTone, 'mono'>`	`'auto'`	Logo tone; `auto` follows the surface.
`class`	`string`	—	Extra classes.

FooterLink
Prop	Type	Default	Description
`label *`	`string`	—	Link text.
`href *`	`string`	—	Link target.
`external`	`boolean`	—	Opens in a new tab with a visually hidden note.

FooterColumn
Prop	Type	Default	Description
`title *`	`string`	—	Column heading (rendered as an eyebrow h2).
`links *`	`FooterLink[]`	—	Links in the column.

* required.