logo-cloud trust-bar social-proof grayscale hover-effect landing-page logos trust grayscale hover partners brands simple grayscale logo cloud hover color logo bar
Logo Cloud Simple
Fetch pattern JSON:
curl https://webspire.de/patterns/logo-cloud/simple.json simple.html
<section class="ws-logo-cloud bg-[var(--ws-logo-cloud-bg)] py-16">
<div class="mx-auto max-w-5xl px-6">
<h2 class="text-center text-sm font-semibold uppercase tracking-wider text-[var(--ws-logo-cloud-text-muted)]">Trusted by industry leaders</h2>
<div class="mt-10 flex flex-wrap items-center justify-center gap-8">
<div class="group flex h-12 w-32 items-center justify-center rounded-md bg-[var(--ws-logo-cloud-bg)] grayscale transition duration-300 hover:grayscale-0">
<span class="text-sm font-semibold text-[var(--ws-logo-cloud-text-muted)] transition duration-300 group-hover:text-[var(--ws-logo-cloud-text-muted)]">Vercel</span>
</div>
<div class="group flex h-12 w-32 items-center justify-center rounded-md bg-[var(--ws-logo-cloud-bg)] grayscale transition duration-300 hover:grayscale-0">
<span class="text-sm font-semibold text-[var(--ws-logo-cloud-text-muted)] transition duration-300 group-hover:text-[var(--ws-logo-cloud-text-muted)]">Stripe</span>
</div>
<div class="group flex h-12 w-32 items-center justify-center rounded-md bg-[var(--ws-logo-cloud-bg)] grayscale transition duration-300 hover:grayscale-0">
<span class="text-sm font-semibold text-[var(--ws-logo-cloud-text-muted)] transition duration-300 group-hover:text-[var(--ws-logo-cloud-text-muted)]">Linear</span>
</div>
<div class="group flex h-12 w-32 items-center justify-center rounded-md bg-[var(--ws-logo-cloud-bg)] grayscale transition duration-300 hover:grayscale-0">
<span class="text-sm font-semibold text-[var(--ws-logo-cloud-text-muted)] transition duration-300 group-hover:text-[var(--ws-logo-cloud-text-muted)]">Notion</span>
</div>
<div class="group flex h-12 w-32 items-center justify-center rounded-md bg-[var(--ws-logo-cloud-bg)] grayscale transition duration-300 hover:grayscale-0">
<span class="text-sm font-semibold text-[var(--ws-logo-cloud-text-muted)] transition duration-300 group-hover:text-[var(--ws-logo-cloud-text-muted)]">Figma</span>
</div>
<div class="group flex h-12 w-32 items-center justify-center rounded-md bg-[var(--ws-logo-cloud-bg)] grayscale transition duration-300 hover:grayscale-0">
<span class="text-sm font-semibold text-[var(--ws-logo-cloud-text-muted)] transition duration-300 group-hover:text-[var(--ws-logo-cloud-text-muted)]">Resend</span>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
logo-cloudtrust-barsocial-proofgrayscalehover-effectlanding-page
Slots
| Name | Required | Description |
|---|---|---|
| headline | No | Trust statement heading above the logo row. |
| logos | Yes | Row of logo placeholders with grayscale-to-color hover effect. |
Simple logo cloud with gray rectangular placeholders and a centered “Trusted by” heading. Logos appear muted in grayscale and transition to full color on hover. Replace placeholders with real SVG logos for production use.