logos-strip

Summary

Single-row trust strip directly under the hero. A short eyebrow line — "Teams choose us for reliable delivery" — sits above six monochrome client logos arranged horizontally with even spacing. No carousel, no marquee — purely static.

HTML structure (minimal)

<section class="logos">
  <p class="logos__eyebrow">Teams choose us for reliable delivery</p>
  <ul class="logos__row">
    <li><img src="/logos/acme.svg"  alt="Acme"></li>
    <li><img src="/logos/north.svg" alt="Northstar"></li>
    <li><img src="/logos/lumen.svg" alt="Lumen"></li>
    <li><img src="/logos/orbit.svg" alt="Orbit"></li>
    <li><img src="/logos/relay.svg" alt="Relay"></li>
    <li><img src="/logos/atlas.svg" alt="Atlas"></li>
  </ul>
</section>

Key SCSS tokens

.logos {
  padding: 56px 32px;
  text-align: center;
  background: #ffffff;
  font-family: "Instrument Sans", system-ui, sans-serif;
}
.logos__eyebrow {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  margin: 0 0 28px;
}
.logos__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  list-style: none;
  padding: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.logos__row img {
  max-height: 28px;
  width: auto;
  filter: none; /* logos kept full-color black, no greyscale forced */
}

Notable details

• No marquee, no infinite scroll, no auto-rotate — sometimes static is the sharpest choice.
• Logos are kept at their natural opacity rather than uniformly greyed out; combined with the all-black palette they read as a single tonal family without artificial filters.
• The eyebrow line is set in the same Instrument Sans 14/500 as the body copy — no special "label" treatment.

Use when

• You have 6 to 8 recognizable client logos and want to establish trust without theatre.
• Pages where the hero already carries the visual weight; the logo strip should recede, not perform.
• Agencies, consultancies, B2B services where credibility comes from the names, not the motion.

Caveats

• Static logos demand high-quality SVGs aligned to a common visual weight — a giant orange logo next to two thin wordmarks breaks the row instantly.
• With fewer than 5 logos the row looks sparse; with more than 8 it bleeds off-screen at smaller viewports.
• Mobile layout will need to wrap into a 3×2 grid; the static-row pattern doesn't transition gracefully on its own.