Components / Site Footer
Live preview — rendered in this site's theme
Site Footer
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 Copy-paste source
<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>