logo-cloud sponsors open-source tiers community funding recognition sponsors open-source tiers platinum gold community funding logos tiered sponsor section for open source project platinum gold sponsor logos with CTA community funding section with sponsor tiers
Logo Cloud Sponsors
Fetch pattern JSON:
curl https://webspire.de/patterns/logo-cloud/sponsors.json sponsors.html
<section class="ws-logo-cloud bg-[var(--ws-logo-cloud-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-logo-cloud-text-muted)]">Sponsors</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-4xl">Built with the community</h2>
<p class="mt-4 text-base leading-relaxed text-[var(--ws-color-text-soft)]">Motion is free and open source thanks to the generous support of our sponsors.</p>
</div>
<!-- Platinum Sponsors -->
<div class="mt-14">
<p class="mb-6 text-center text-xs font-semibold uppercase tracking-[0.18em] text-[var(--ws-logo-cloud-text-muted)]">Platinum</p>
<div class="flex flex-wrap items-center justify-center gap-8">
<a href="#" class="group flex h-20 w-56 items-center justify-center rounded-2xl border border-[var(--ws-logo-cloud-border)] bg-[var(--ws-color-surface)] px-8 transition-colors hover:border-[var(--ws-color-accent)]">
<span class="text-lg font-bold text-[var(--ws-color-text-soft)] transition-colors group-hover:text-[var(--ws-color-text)]">Acme Corp</span>
</a>
<a href="#" class="group flex h-20 w-56 items-center justify-center rounded-2xl border border-[var(--ws-logo-cloud-border)] bg-[var(--ws-color-surface)] px-8 transition-colors hover:border-[var(--ws-color-accent)]">
<span class="text-lg font-bold text-[var(--ws-color-text-soft)] transition-colors group-hover:text-[var(--ws-color-text)]">Globex</span>
</a>
<a href="#" class="group flex h-20 w-56 items-center justify-center rounded-2xl border border-[var(--ws-logo-cloud-border)] bg-[var(--ws-color-surface)] px-8 transition-colors hover:border-[var(--ws-color-accent)]">
<span class="text-lg font-bold text-[var(--ws-color-text-soft)] transition-colors group-hover:text-[var(--ws-color-text)]">Initech</span>
</a>
</div>
</div>
<!-- Gold Sponsors -->
<div class="mt-10">
<p class="mb-6 text-center text-xs font-semibold uppercase tracking-[0.18em] text-[var(--ws-logo-cloud-text-muted)]">Gold</p>
<div class="flex flex-wrap items-center justify-center gap-5">
<a href="#" class="group flex h-14 w-40 items-center justify-center rounded-xl border border-[var(--ws-logo-cloud-border)] bg-[var(--ws-color-surface)] px-5 transition-colors hover:border-[var(--ws-color-accent)]">
<span class="text-sm font-semibold text-[var(--ws-color-text-soft)] transition-colors group-hover:text-[var(--ws-color-text)]">Umbrella Co</span>
</a>
<a href="#" class="group flex h-14 w-40 items-center justify-center rounded-xl border border-[var(--ws-logo-cloud-border)] bg-[var(--ws-color-surface)] px-5 transition-colors hover:border-[var(--ws-color-accent)]">
<span class="text-sm font-semibold text-[var(--ws-color-text-soft)] transition-colors group-hover:text-[var(--ws-color-text)]">Weyland-Y</span>
</a>
<a href="#" class="group flex h-14 w-40 items-center justify-center rounded-xl border border-[var(--ws-logo-cloud-border)] bg-[var(--ws-color-surface)] px-5 transition-colors hover:border-[var(--ws-color-accent)]">
<span class="text-sm font-semibold text-[var(--ws-color-text-soft)] transition-colors group-hover:text-[var(--ws-color-text)]">Soylent</span>
</a>
<a href="#" class="group flex h-14 w-40 items-center justify-center rounded-xl border border-[var(--ws-logo-cloud-border)] bg-[var(--ws-color-surface)] px-5 transition-colors hover:border-[var(--ws-color-accent)]">
<span class="text-sm font-semibold text-[var(--ws-color-text-soft)] transition-colors group-hover:text-[var(--ws-color-text)]">Rekall Inc</span>
</a>
</div>
</div>
<!-- Become a sponsor CTA -->
<div class="mt-12 flex flex-col items-center gap-3">
<div class="flex h-14 w-40 items-center justify-center rounded-xl border border-dashed border-[var(--ws-logo-cloud-border)]">
<span class="text-xs text-[var(--ws-logo-cloud-text-muted)]">Your logo here</span>
</div>
<a href="#" class="mt-1 inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--ws-color-accent)] hover:underline">
Become a sponsor
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
logo-cloudsponsorsopen-sourcetierscommunityfundingrecognition
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Optional kicker, title, and subtitle. |
| platinum | Yes | Up to 3 large sponsor logo cards (h-20, w-56). |
| gold | No | Up to 6 medium sponsor logo cards (h-14, w-40). |
| cta | No | Dashed placeholder card with "Become a sponsor" link. |
Tiered sponsor section inspired by open-source project pages. Two rows: Platinum (3 large bordered cards) and Gold (4 medium cards). Ends with a dashed “Your logo here” card and a “Become a sponsor” link. Different from logo-cloud/base which is a flat trust bar — this version communicates investment tiers and invites new sponsors.