logo-cloud trust-bar social-proof partners landing-page logos trust partners clients brands trusted by logos section partner logo cloud
Logo Cloud Base
Fetch pattern JSON:
curl https://webspire.de/patterns/logo-cloud/base.json base.html
<section class="ws-logo-cloud border-y border-[var(--ws-color-border)] bg-[var(--ws-logo-cloud-bg)] py-12">
<div class="mx-auto max-w-7xl px-6">
<p class="text-center text-xs font-semibold uppercase tracking-[0.15em] text-[var(--ws-logo-cloud-text-muted)]">Trusted by teams at</p>
<div class="mt-8 flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
<span class="text-lg font-bold tracking-tight text-[var(--ws-color-text)] opacity-40 transition-opacity duration-200 hover:opacity-70">Vercel</span>
<span class="text-lg font-bold tracking-tight text-[var(--ws-color-text)] opacity-40 transition-opacity duration-200 hover:opacity-70">Stripe</span>
<span class="text-lg font-bold tracking-tight text-[var(--ws-color-text)] opacity-40 transition-opacity duration-200 hover:opacity-70">Linear</span>
<span class="text-lg font-bold tracking-tight text-[var(--ws-color-text)] opacity-40 transition-opacity duration-200 hover:opacity-70">Notion</span>
<span class="text-lg font-bold tracking-tight text-[var(--ws-color-text)] opacity-40 transition-opacity duration-200 hover:opacity-70">Figma</span>
<span class="text-lg font-bold tracking-tight text-[var(--ws-color-text)] opacity-40 transition-opacity duration-200 hover:opacity-70">Resend</span>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
logo-cloudtrust-barsocial-proofpartnerslanding-page
Slots
| Name | Required | Description |
|---|---|---|
| headline | No | Trust statement above logos. |
| logos | Yes | Row of partner/client logos or brand names. |
Minimal trust bar with placeholder brand names. Replace text spans with actual SVG logos for production. Place directly below the hero section for maximum trust impact.