Skip to content

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 settings.ui.css Interface 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.

Pick a real heading level for the column titles: the next one in your page’s outline (usually h2), sized down with a heading helper class like .h5. Jumping straight to an h5 for its looks would leave a heading-level gap for screen-reader users on every page.

<footer class="footer">
  <nav class="footer_nav" aria-label="Footer">
    <ul>
      <li>
        <h2 class="h5">Documentation</h2>
        <ul>
          <li><a href="/docs">Getting started</a></li>
          <li><a href="/docs/tokens">Tokens</a></li>
        </ul>
      </li>
      <li>
        <h2 class="h5">Connect</h2>
        <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 settings.ui.css:

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