Back to Widget Patterns
v2.6Social Proof
Featured In Press Strip
Publication-logos variant of TrustLogoStrip. Default eyebrow 'Featured in' with color logos preserved. Composes TrustLogoStrip with press-specific CSS overrides.
Live preview
Rendered with real component code. Each example demonstrates a documented variant.
Default, color logos
Featured in
Custom eyebrow
As seen in
React props
Configure the component via props in React or via attributes in HTML.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Featured in" | Label text above the logo row |
| logos | Logo[] | required | Array of publication logo objects ({ name, src, href? }) |
| showColor | boolean | true | When true, overrides the logo filter so logos render in full color; set to false for grayscale |
| className | string | undefined | Optional extra class applied 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">
<link rel="stylesheet" href="path/to/featured-in-press-strip/styles.css">
<!-- Color variant (default) -->
<section class="tls fips fips--color">
<p class="tls__eyebrow">Featured in</p>
<ul class="tls__list">
<li class="tls__item">
<img class="tls__logo" src="/press/daily-ledger.svg" alt="The Daily Ledger" loading="lazy">
</li>
<li class="tls__item">
<img class="tls__logo" src="/press/tech-review.svg" alt="Tech Review Weekly" loading="lazy">
</li>
<li class="tls__item">
<img class="tls__logo" src="/press/metro-biz.svg" alt="Metro Business" loading="lazy">
</li>
</ul>
</section>
<!-- Grayscale variant -->
<section class="tls fips">
<p class="tls__eyebrow">As seen in</p>
<ul class="tls__list">
<li class="tls__item">
<img class="tls__logo" src="/press/daily-ledger.svg" alt="The Daily Ledger" loading="lazy">
</li>
</ul>
</section>Customization
Override these CSS custom properties to integrate the component into your brand.
/* FeaturedInPressStrip adds a color modifier on top of TrustLogoStrip tokens. */
.fips--color {
--tls-logo-filter: none;
--tls-logo-opacity: 1;
--tls-logo-opacity-hover: 1;
}
/* Override TrustLogoStrip tokens for sizing and color: */
:root {
--tls-logo-height: 40px;
--tls-eyebrow-color: #374151;
}