logo-cloud grid partners clients trust logo cloud grid partners clients trust brands companies logo grid section partner logo cloud
Logo Cloud Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/logo-cloud/grid.json grid.html
<section class="ws-logo-cloud bg-[var(--ws-logo-cloud-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<p class="text-center text-sm font-semibold text-[var(--ws-logo-cloud-text-muted)]">Trusted by innovative companies worldwide</p>
<div class="mx-auto mt-10 grid max-w-4xl grid-cols-2 items-center gap-x-10 gap-y-8 sm:grid-cols-3 lg:grid-cols-5">
<div class="flex items-center justify-center">
<svg class="h-8 text-[var(--ws-logo-cloud-text-muted)] transition grayscale hover:text-[var(--ws-logo-cloud-text-muted)] hover:grayscale-0" viewBox="0 0 120 30" fill="currentColor">
<rect x="0" y="8" width="14" height="14" rx="3"/>
<text x="20" y="22" font-size="16" font-weight="600">Acme</text>
</svg>
</div>
<div class="flex items-center justify-center">
<svg class="h-8 text-[var(--ws-logo-cloud-text-muted)] transition grayscale hover:text-[var(--ws-logo-cloud-text-muted)] hover:grayscale-0" viewBox="0 0 120 30" fill="currentColor">
<circle cx="10" cy="15" r="8"/>
<text x="24" y="22" font-size="16" font-weight="600">Nova</text>
</svg>
</div>
<div class="flex items-center justify-center">
<svg class="h-8 text-[var(--ws-logo-cloud-text-muted)] transition grayscale hover:text-[var(--ws-logo-cloud-text-muted)] hover:grayscale-0" viewBox="0 0 120 30" fill="currentColor">
<polygon points="10,2 18,28 2,28"/>
<text x="24" y="22" font-size="16" font-weight="600">Vertex</text>
</svg>
</div>
<div class="flex items-center justify-center">
<svg class="h-8 text-[var(--ws-logo-cloud-text-muted)] transition grayscale hover:text-[var(--ws-logo-cloud-text-muted)] hover:grayscale-0" viewBox="0 0 120 30" fill="currentColor">
<rect x="2" y="6" width="10" height="10" rx="2" transform="rotate(45 7 11)"/>
<text x="22" y="22" font-size="16" font-weight="600">Prism</text>
</svg>
</div>
<div class="flex items-center justify-center">
<svg class="h-8 text-[var(--ws-logo-cloud-text-muted)] transition grayscale hover:text-[var(--ws-logo-cloud-text-muted)] hover:grayscale-0" viewBox="0 0 120 30" fill="currentColor">
<rect x="0" y="8" width="20" height="4" rx="2"/>
<rect x="0" y="16" width="14" height="4" rx="2"/>
<text x="26" y="22" font-size="16" font-weight="600">Stripe</text>
</svg>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
logo-cloudgridpartnersclientstrust
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Optional section title. |
| logos | Yes | Grid of logo images or SVGs with consistent sizing. |
Static logo grid with a centered heading and 5-column layout. Logos are grayscale with hover-to-color effect. Even spacing with max-height constraints for consistent sizing. Stacks to 3 columns on tablet, 2 on mobile.