footer dark premium display-typography agency contact social columns footer dark premium agency display email phone contact social-icons columns premium dark footer with large contact email agency footer display typography dark footer oversized email and phone
Footer Premium Dark
Fetch pattern JSON:
curl https://webspire.de/patterns/footer/premium-dark.json premium-dark.html
<footer class="ws-footer relative bg-slate-950 text-white" aria-label="Site footer"><!-- ws-ok -->
<!-- Thin accent top border -->
<div class="h-px w-full bg-[var(--ws-color-accent)]" aria-hidden="true"></div>
<div class="mx-auto max-w-7xl px-6 py-20">
<!-- Display-size contact details -->
<div class="mb-16">
<a href="mailto:hello@studio.com" class="block text-5xl font-bold text-white transition-colors hover:text-[var(--ws-color-accent)] hover:underline sm:text-6xl">
hello@studio.com
</a>
<a href="tel:+49301234567" class="mt-3 block text-3xl font-semibold text-slate-400 transition-colors hover:text-white hover:underline sm:text-4xl">
+49 30 123 45 67
</a>
</div>
<!-- 4-column nav grid -->
<div class="grid grid-cols-2 gap-10 border-t border-slate-800 pt-12 sm:grid-cols-4">
<div>
<h3 class="text-xs font-semibold uppercase tracking-widest text-slate-500">About us</h3>
<ul class="mt-5 space-y-3">
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Our story</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Team</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Culture</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Careers</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-semibold uppercase tracking-widest text-slate-500">Services</h3>
<ul class="mt-5 space-y-3">
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Brand Design</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Web Development</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Strategy</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Motion</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-semibold uppercase tracking-widest text-slate-500">Work</h3>
<ul class="mt-5 space-y-3">
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Case Studies</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Portfolio</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Awards</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Press</a></li>
</ul>
</div>
<div>
<h3 class="text-xs font-semibold uppercase tracking-widest text-slate-500">Connect</h3>
<ul class="mt-5 space-y-3">
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Instagram</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">LinkedIn</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Dribbble</a></li>
<li><a href="#" class="text-sm text-slate-300 transition hover:text-white">Behance</a></li>
</ul>
</div>
</div>
<!-- Bottom bar -->
<div class="mt-12 flex flex-col items-start justify-between gap-6 border-t border-slate-800 pt-8 sm:flex-row sm:items-center">
<p class="text-sm text-slate-500">© 2026 Studio. All rights reserved.</p>
<!-- Large bordered social icon squares -->
<div class="flex items-center gap-3" role="list" aria-label="Social media links">
<a href="#" role="listitem" aria-label="Twitter" class="flex h-12 w-12 items-center justify-center rounded-lg border border-slate-800 text-slate-400 transition hover:border-slate-600 hover:bg-slate-800 hover:text-white">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" role="listitem" aria-label="Instagram" class="flex h-12 w-12 items-center justify-center rounded-lg border border-slate-800 text-slate-400 transition hover:border-slate-600 hover:bg-slate-800 hover:text-white">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
</a>
<a href="#" role="listitem" aria-label="LinkedIn" class="flex h-12 w-12 items-center justify-center rounded-lg border border-slate-800 text-slate-400 transition hover:border-slate-600 hover:bg-slate-800 hover:text-white">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="#" role="listitem" aria-label="Dribbble" class="flex h-12 w-12 items-center justify-center rounded-lg border border-slate-800 text-slate-400 transition hover:border-slate-600 hover:bg-slate-800 hover:text-white">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"/></svg>
</a>
</div>
</div>
</div>
</footer>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
footerdarkpremiumdisplay-typographyagencycontactsocialcolumns
Slots
| Name | Required | Description |
|---|---|---|
| contact | Yes | Display-size email address and phone number with hover underline. |
| nav-columns | Yes | 4-column link grid with About, Services, Work, and Connect. |
| bottom-bar | Yes | Copyright text and 4 large bordered social icon squares. |
Premium dark footer (slate-950) with a thin accent-colored top border. Features display-size contact details (text-5xl email + text-3xl phone) with hover underline, a 4-column nav grid (About/Services/Work/Connect), and a bottom bar with copyright + four large 48x48px bordered social icon squares that fill on hover.