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

Family

logo-cloud

Tier

enhanced

Kind

section

Extends

logo-cloud/base

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.