footer community discord github forum events community discord github forum events footer community footer with channels footer with discord github forum events
Footer Community
Fetch pattern JSON:
curl https://webspire.de/patterns/footer/community.json community.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="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
<div>
<h2 class="text-lg font-bold text-[var(--ws-footer-text)]">Join the community</h2>
<p class="mt-1 text-sm text-[var(--ws-footer-text-muted)]">12,400 builders sharing what they ship.</p>
</div>
<p class="text-sm text-[var(--ws-footer-text-muted)]">Next community call: <span class="font-medium text-[var(--ws-footer-text)]">June 20, 17:00 CET</span></p>
</div>
<ul class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<li>
<a href="#discord" class="group flex h-full flex-col gap-2 rounded-xl border border-[var(--ws-footer-border)] p-4 transition hover:border-[var(--ws-color-border-strong)]">
<svg class="h-6 w-6 text-[var(--ws-footer-text)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.317 4.369a19.79 19.79 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.249a18.27 18.27 0 00-5.487 0 12.6 12.6 0 00-.617-1.25.077.077 0 00-.079-.036A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028 14.09 14.09 0 001.226-1.994.076.076 0 00-.041-.106 13.1 13.1 0 01-1.872-.892.077.077 0 01-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.009c.12.099.246.198.373.292a.077.077 0 01-.006.127c-.598.35-1.22.645-1.873.892a.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.84 19.84 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.331c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.956-2.418 2.157-2.418 1.21 0 2.176 1.094 2.157 2.418 0 1.334-.956 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.418 2.157-2.418 1.21 0 2.176 1.094 2.157 2.418 0 1.334-.946 2.419-2.157 2.419z"/></svg>
<span class="text-sm font-semibold text-[var(--ws-footer-text)]">Discord</span>
<span class="text-xs text-[var(--ws-footer-text-muted)]">Live chat & help</span>
</a>
</li>
<li>
<a href="#github" class="group flex h-full flex-col gap-2 rounded-xl border border-[var(--ws-footer-border)] p-4 transition hover:border-[var(--ws-color-border-strong)]">
<svg class="h-6 w-6 text-[var(--ws-footer-text)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
<span class="text-sm font-semibold text-[var(--ws-footer-text)]">GitHub</span>
<span class="text-xs text-[var(--ws-footer-text-muted)]">Source & issues</span>
</a>
</li>
<li>
<a href="#forum" class="group flex h-full flex-col gap-2 rounded-xl border border-[var(--ws-footer-border)] p-4 transition hover:border-[var(--ws-color-border-strong)]">
<svg class="h-6 w-6 text-[var(--ws-footer-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 01-9 9c-1.6 0-3.1-.42-4.4-1.15L3 21l1.15-4.6A8.96 8.96 0 013 12a9 9 0 1118 0z"/></svg>
<span class="text-sm font-semibold text-[var(--ws-footer-text)]">Forum</span>
<span class="text-xs text-[var(--ws-footer-text-muted)]">Long-form Q&A</span>
</a>
</li>
<li>
<a href="#events" class="group flex h-full flex-col gap-2 rounded-xl border border-[var(--ws-footer-border)] p-4 transition hover:border-[var(--ws-color-border-strong)]">
<svg class="h-6 w-6 text-[var(--ws-footer-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
<span class="text-sm font-semibold text-[var(--ws-footer-text)]">Events</span>
<span class="text-xs text-[var(--ws-footer-text-muted)]">Meetups & calls</span>
</a>
</li>
</ul>
<p class="mt-10 border-t border-[var(--ws-footer-border)] pt-6 text-sm text-[var(--ws-footer-text-muted)]">© 2026 Webspire Community</p>
</div>
</footer>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
footercommunitydiscordgithubforumevents
Slots
| Name | Required | Description |
|---|---|---|
| intro | Yes | Heading, member count, and next-call announcement. |
| channels | Yes | Channel cards for community platforms. |
Community footer in the Footer family. Closes the page as a community hub — channel cards plus a next-call announcement — instead of a corporate link grid. Best for open-source and developer-led products.