footer terminal command-line console developer monospace terminal console command-line shell developer monospace terminal style footer command line developer footer
Footer Command Line
Fetch pattern JSON:
curl https://webspire.de/patterns/footer/command-line.json command-line.html
<footer class="ws-footer border-t border-[var(--ws-footer-border)] bg-[var(--ws-footer-bg)] py-14">
<div class="mx-auto max-w-4xl px-6">
<!-- Terminal panel (always-dark by design) -->
<div class="overflow-hidden rounded-xl border border-slate-800 bg-slate-950 font-mono text-sm shadow-lg">
<!-- Title bar -->
<div class="flex items-center gap-2 border-b border-slate-800 px-4 py-2.5">
<span class="h-3 w-3 rounded-full bg-red-500/80" aria-hidden="true"></span>
<span class="h-3 w-3 rounded-full bg-amber-500/80" aria-hidden="true"></span>
<span class="h-3 w-3 rounded-full bg-emerald-500/80" aria-hidden="true"></span>
<span class="ml-2 text-xs text-slate-500">visitor@webspire: ~</span>
</div>
<!-- Body -->
<div class="space-y-2 p-5 leading-relaxed text-slate-300">
<p>
<span class="text-emerald-400">visitor@webspire</span><span class="text-slate-500">:~$</span> ls
</p>
<nav aria-label="Footer" class="grid grid-cols-2 gap-x-8 gap-y-1 pl-4 sm:grid-cols-3">
<a href="#docs" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">docs/</a>
<a href="#api" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">api/</a>
<a href="#guides" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">guides/</a>
<a href="#contact" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">contact</a>
<a href="#support" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">support</a>
<a href="#status" class="text-cyan-400 transition hover:text-cyan-300 hover:underline">status</a>
</nav>
<p>
<span class="text-emerald-400">visitor@webspire</span><span class="text-slate-500">:~$</span> cat license.txt
</p>
<p class="pl-4 text-slate-400">Free to use. No attribution required.</p>
<p>
<span class="text-emerald-400">visitor@webspire</span><span class="text-slate-500">:~$</span>
<span class="ml-1 inline-block h-4 w-2 translate-y-0.5 bg-slate-300" aria-hidden="true"></span>
</p>
</div>
</div>
<p class="mt-6 text-center text-xs text-[var(--ws-footer-text-muted)]">© 2026 Webspire. Built for developers.</p>
</div>
</footer>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
footerterminalcommand-lineconsoledevelopermonospace
Slots
| Name | Required | Description |
|---|---|---|
| terminal | Yes | Console panel with prompt lines and link directory. |
| copyright | Yes | Copyright line below the panel. |
Terminal-styled footer in the Footer family. Renders navigation as a shell session inside an always-dark console panel — a developer-native alternative to the four-column link grid.