Skip to main content
WireKit
Copy for LLM

Logo Cloud

The "trusted by" wall. A responsive grid of partner or customer logos, muted so a row of clashing brand colors does not compete with your own.

It is a real list of companies, not a decorative strip — so someone who cannot see the wall still learns how many names are being claimed, and each logo carries its own name.

Logo cloud with a lead-in

Trusted by teams at

  • Acme
  • Globex
  • Initech
  • Umbrella
  • Soylent 
<x-wirekit::logo-cloud label="Trusted by teams at">
    <li><x-wirekit::image src="/placeholder/160x48?bg=e5e7eb&fg=374151&label=Acme&gradient=none" alt="Acme" /></li>
    <li><x-wirekit::image src="/placeholder/160x48?bg=e5e7eb&fg=374151&label=Globex&gradient=none" alt="Globex" /></li>
    <li><x-wirekit::image src="/placeholder/160x48?bg=e5e7eb&fg=374151&label=Initech&gradient=none" alt="Initech" /></li>
    <li><x-wirekit::image src="/placeholder/160x48?bg=e5e7eb&fg=374151&label=Umbrella&gradient=none" alt="Umbrella" /></li>
    <li><x-wirekit::image src="/placeholder/160x48?bg=e5e7eb&fg=374151&label=Soylent&gradient=none" alt="Soylent" /></li>
</x-wirekit::logo-cloud>

Every logo needs a name

A logo is not decoration here — it is the claim. Give each one an alt naming the company:

<x-wirekit::logo-cloud label="Trusted by teams at">
    <li><x-wirekit::image src="/logos/acme.svg" alt="Acme" /></li>
    <li><x-wirekit::image src="/logos/globex.svg" alt="Globex" /></li>
</x-wirekit::logo-cloud>

An alt="" here would leave a screen-reader user with "list, 5 items" and five items of nothing — the exact opposite of what the wall is for.

Muted by default

Logos render grayscale at reduced opacity and return to full color on hover or keyboard focus. That is purely visual: every logo keeps its alt, so nothing about a company's identity depends on seeing its color.

Pass :muted="false" to show them in full color:

<x-wirekit::logo-cloud :muted="false">…</x-wirekit::logo-cloud>

Naming the list

label renders a visible lead-in and names the list. When you want the list's accessible name to differ from the visible text, pass aria-label as well:

{{-- Visible: "Trusted by" · announced: "Customer logos" --}}
<x-wirekit::logo-cloud label="Trusted by" aria-label="Customer logos">…</x-wirekit::logo-cloud>

With neither, no name is announced at all — which is deliberate. An aria-label="" announces a boundary and then cannot say what it is for.

Props

Prop Type Default Description
label string|null null Visible lead-in above the wall. Also names the list.
ariaLabel string|null null Accessible name for the list, when it should differ from label.
muted bool true Render the logos grayscale until hover or focus.
scope string|null null Class-scope override.

Accessibility

  • The wall is a <ul role="list"> of <li> items, so the number of companies is announced before the names.
  • The muted treatment is decorative and reverses on keyboard focus as well as hover — a reveal that only answers to a pointer is a mouse-only affordance.
  • The filter transition is disabled under prefers-reduced-motion.
  • Nothing moves. A scrolling logo wall would need a pause control (WCAG 2.2.2) and would read its cloned logos twice to a screen reader; a wall that simply sits there has neither problem and is easier to read.

Keyboard Interaction

None of its own. If you wrap a logo in a link it keeps its normal tab behavior, and focusing it reveals its full color.