sponsor-logo-row

Summary

Single-row brand block on a dark surface. The first slot is occupied by an oversized "WORKED WITH GLOBAL LARGEST BRANDS" three-line headline; the four remaining slots carry monochrome partner logos. The headline replaces a section title — the entire band is the "trusted by" statement.

HTML structure (minimal)

<section class="sponsor-section pb-130">
  <div class="container">
    <div class="sponsor-wrap">
      <div class="sponsor-item item-1">
        <h3 class="title">WORKED WITH <br>GLOBAL LARGEST <br> BRANDS</h3>
      </div>
      <div class="sponsor-item">
        <a href="#"><img src="assets/img/sponsor/sponsor-1.png" alt="sponsor"></a>
      </div>
      <div class="sponsor-item">
        <a href="#"><img src="assets/img/sponsor/sponsor-2.png" alt="sponsor"></a>
      </div>
      <div class="sponsor-item">
        <a href="#"><img src="assets/img/sponsor/sponsor-3.png" alt="sponsor"></a>
      </div>
      <div class="sponsor-item">
        <a href="#"><img src="assets/img/sponsor/sponsor-4.png" alt="sponsor"></a>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.sponsor-wrap {
  display: grid; grid-template-columns: 1.5fr repeat(4, 1fr);
  align-items: center;
  border-top: 1px solid var(--rr-color-border-1);
  border-bottom: 1px solid var(--rr-color-border-1);
  padding: 50px 0;
}
.sponsor-item {
  text-align: center;
  &.item-1 .title {
    color: var(--rr-color-common-white);
    font-size: 28px; font-weight: 700; line-height: 1.3; text-transform: uppercase;
  }
  img { max-width: 160px; opacity: .7; transition: opacity .3s ease;
    &:hover { opacity: 1; } }
}

Animation logic

(no JS animation — pure CSS hover and grid)

Notable details

• The first column is wider (1.5fr) than the four logo columns (1fr each), so the headline visually "anchors" the row rather than competing with the logos.
• Logos sit at 70% opacity by default and snap to 100% on hover — the "off until interaction" treatment keeps the row from looking cluttered with mismatched brand colours.
• Bottom + top borders on the wrapping .sponsor-wrap element turn the entire row into a section divider, no extra HR needed.

Use when

• Trust-builder sections on agency or consulting sites where the headline + 4 logos format reads better than a 6-up logo grid.
• Sites where the partner roster must include a written claim ("Worked with…") rather than just brand marks.

Caveats

• 5-column grid breaks down to a stacked single column on small screens via Bootstrap utility classes; the headline becomes the first row and logos stack below in a 2-up grid (per SCSS rules in _sponsor.scss).
• Logos are PNGs without srcset, so retina screens may render slightly soft; consider swapping to SVG for production.