component :: Footer

The .footer component is the site-wide bottom section: link columns on the right, a meta area (copyright, credits, version…) on the left. Pure HTML and CSS, no JavaScript.

File	Description	Source
`component.footer.css`	All footer styles	Github
`Footer.astro`	The Astro component	Github
`--footer-*` block in default theme	Theme tokens (see table below)	Github

HTML

The footer expects two regions: a nav with one <ul> whose <li> children are the columns (a heading plus a link list each), and a .footer_meta section.

<footer class="footer">
  <nav class="footer_nav" aria-label="Footer">
    <ul>
      <li>
        <h5>Documentation</h5>
        <ul>
          <li><a href="/docs">Getting started</a></li>
          <li><a href="/docs/tokens">Tokens</a></li>
        </ul>
      </li>
      <li>
        <h5>Connect</h5>
        <ul>
          <li><a href="https://github.com/…">Github</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <section class="footer_meta">
    <p>© 2026 Acme Inc.</p>
  </section>
</footer>

Custom properties

The following custom properties are available in the default theme:

Property	Description
`--footer-background-color`	Background color.
`--footer-text-color`	Text color.
`--footer-border-width`	Top border width.
`--footer-border-color`	Top border color (transparent in light theme).
`--footer-link-color`	Link color.
`--footer-link-color-hover`	Link hover color.

Astro component

Prop	Type	Default	Description
`navLabel`	`string`	`"Footer"`	`aria-label` for the footer nav.
`class`	`string`	`undefined`	Additional CSS classes, useful for helper classes.

Any other attribute is passed through to the root <footer> element.

Slot	Description
(default)	The link columns: one `<ul>` with one `<li>` per column (heading + `<ul>`).
`meta`	The meta area: copyright, credits, socials…

Examples

---
import Footer from "../components/Footer.astro";
---
<Footer>
  <ul>
    <li>
      <h5>Product</h5>
      <ul>
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
      </ul>
    </li>
  </ul>
  <Fragment slot="meta">
    <p>© 2026 Acme Inc.</p>
  </Fragment>
</Footer>

This site’s own footer is the same component; see SiteFooter.astro for a full example with social icons and a version line in the meta slot.