footer archive blog categories tags index archive blog categories tags tag cloud monthly blog archive footer footer with categories and tag cloud
Footer Archive
Fetch pattern JSON:
curl https://webspire.de/patterns/footer/archive.json archive.html
<footer class="ws-footer border-t border-[var(--ws-footer-border)] bg-[var(--ws-footer-bg)] py-12">
<div class="mx-auto max-w-7xl px-6">
<div class="grid gap-8 md:grid-cols-3 lg:grid-cols-4">
<!-- Archive by month -->
<nav aria-labelledby="footer-archive">
<p id="footer-archive" class="text-sm font-semibold text-[var(--ws-footer-text)]">Archive</p>
<ul class="mt-4 space-y-2">
<li><a href="#" class="flex items-center justify-between text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">June 2026 <span class="text-xs text-[var(--ws-color-text-faint)]">12</span></a></li>
<li><a href="#" class="flex items-center justify-between text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">May 2026 <span class="text-xs text-[var(--ws-color-text-faint)]">18</span></a></li>
<li><a href="#" class="flex items-center justify-between text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">April 2026 <span class="text-xs text-[var(--ws-color-text-faint)]">21</span></a></li>
<li><a href="#" class="flex items-center justify-between text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">March 2026 <span class="text-xs text-[var(--ws-color-text-faint)]">15</span></a></li>
</ul>
</nav>
<!-- Categories -->
<nav aria-labelledby="footer-categories">
<p id="footer-categories" class="text-sm font-semibold text-[var(--ws-footer-text)]">Categories</p>
<ul class="mt-4 space-y-2">
<li><a href="#" class="text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Engineering</a></li>
<li><a href="#" class="text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Design</a></li>
<li><a href="#" class="text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Product</a></li>
<li><a href="#" class="text-sm text-[var(--ws-footer-text-muted)] transition hover:text-[var(--ws-footer-link-hover)]">Notes</a></li>
</ul>
</nav>
<!-- Tags -->
<div class="md:col-span-1 lg:col-span-2">
<p class="text-sm font-semibold text-[var(--ws-footer-text)]">Tags</p>
<ul class="mt-4 flex flex-wrap gap-2">
<li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">typescript</a></li>
<li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">css</a></li>
<li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">accessibility</a></li>
<li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">performance</a></li>
<li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">tailwind</a></li>
<li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">astro</a></li>
<li><a href="#" class="rounded-full border border-[var(--ws-footer-border)] px-3 py-1 text-xs text-[var(--ws-footer-text-muted)] transition hover:border-[var(--ws-color-border-strong)] hover:text-[var(--ws-footer-link-hover)]">archive</a></li>
</ul>
</div>
</div>
<p class="mt-10 border-t border-[var(--ws-footer-border)] pt-6 text-sm text-[var(--ws-footer-text-muted)]">© 2026 Field Notes. Written since 2009.</p>
</div>
</footer>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
footerarchiveblogcategoriestagsindex
Slots
| Name | Required | Description |
|---|---|---|
| archive | Yes | Monthly archive links with post counts. |
| categories | Yes | Category navigation. |
| tags | No | Tag cloud of pill links. |
Archive footer in the Footer family. Revives the classic blog index — monthly archives, categories, and a tag cloud — as a content-discovery footer for publications with deep back-catalogues.