v2.0Social Proof

Trust Logo Strip

Horizontal strip of customer or partner logos with an optional eyebrow label. Conveys credibility through recognizable brand associations. Logos render in grayscale by default for visual cohesion with the surrounding page.

Read the pattern View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

Default (with eyebrow)

Trusted by teams at

Without eyebrow

With linked logos

Featured in

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
eyebrow	string	"Trusted by teams at"	Label above the logo row; pass an empty string to omit it
logos	{ name, src, href? }[]	required	Array of logos; name is used for alt text, href wraps the logo in a link
className	string	undefined	Extra class appended to the root element

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/trust-logo-strip/styles.css">

<section class="tls">
  <p class="tls__eyebrow">Trusted by teams at</p>
  <ul class="tls__list">
    <li class="tls__item">
      <img class="tls__logo" src="/logos/acme.svg" alt="Acme">
    </li>
    <li class="tls__item">
      <a class="tls__item-link" href="https://example.com">
        <img class="tls__logo" src="/logos/globex.svg" alt="Globex">
      </a>
    </li>
  </ul>
</section>

Customization

Override these CSS custom properties to integrate the component into your brand.

.tls {
  --tls-eyebrow-color: var(--brand-muted, #6b7280);
  --tls-eyebrow-size: 0.75rem;
  --tls-eyebrow-tracking: 0.1em;
  --tls-eyebrow-weight: 600;
  --tls-logo-height: 32px;
  --tls-logo-opacity: 0.65;
  --tls-logo-opacity-hover: 1;
  --tls-logo-filter: grayscale(100%);
  --tls-gap: 2.5rem;
  --tls-padding-block: 2rem;
}