> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Site Footer

Four-column footer with agent links

- Category: Components
- Tags: footer navigation sitemap

## Usage

The footer doubles as a sitemap and an agent on-ramp. Four columns: brand statement, content sections, utility pages, machine resources.

## Rules

- Column titles are mono caps at 50% opacity — quiet wayfinding.
- Agent links (llms.txt, agenticweb.md) get accent hover to signal "machine-facing".
- Bottom bar carries legal + platform credit in mono micro-type.
- On mobile collapse to two columns; brand block spans full width first.
- Include the `.md` hint in the brand blurb — it teaches the markdown convention where users expect fine print.

## HTML source

```html
<footer class="border-t border-base-content/10 mt-24">
  <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-[2fr_1fr_1fr_1fr] gap-8 py-14">
    <div>
      <a href="/" class="text-lg font-semibold tracking-tight">Wordmark<span class="text-primary">.</span></a>
      <p class="mt-3 text-sm text-base-content/60 max-w-xs leading-relaxed">
        A working library for agentic web development. Every page has a markdown twin — append <code>.md</code>.
      </p>
    </div>
    <nav aria-label="Library">
      <p class="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-base-content/50 mb-3">Library</p>
      <ul class="space-y-2 text-sm text-base-content/70">
        <li><a href="#" class="hover:text-primary">Styles</a></li>
        <li><a href="#" class="hover:text-primary">Themes</a></li>
        <li><a href="#" class="hover:text-primary">Components</a></li>
      </ul>
    </nav>
    <nav aria-label="Site">
      <p class="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-base-content/50 mb-3">Site</p>
      <ul class="space-y-2 text-sm text-base-content/70">
        <li><a href="#" class="hover:text-primary">Collections</a></li>
        <li><a href="#" class="hover:text-primary">Changelog</a></li>
        <li><a href="#" class="hover:text-primary">About</a></li>
      </ul>
    </nav>
    <nav aria-label="Agents">
      <p class="font-mono text-[0.68rem] uppercase tracking-[0.16em] text-base-content/50 mb-3">Agents</p>
      <ul class="space-y-2 text-sm text-base-content/70">
        <li><a href="/llms.txt" class="hover:text-accent">llms.txt</a></li>
        <li><a href="/agenticweb.md" class="hover:text-accent">agenticweb.md</a></li>
      </ul>
    </nav>
  </div>
  <div class="max-w-6xl mx-auto px-6 border-t border-base-content/10 py-5 flex flex-wrap justify-between gap-3 font-mono text-xs text-base-content/45">
    <span>© 2026 Wordmark</span>
    <span>Built with PageWeave · Hosted in the EU</span>
  </div>
</footer>
```