Figma marketing website social proof sections

A logo bar is the fastest claim a website makes. Six marks, no sentence, and the visitor has decided whether you are a real company before they finish the headline. It is the shallow end of persuasion and it works, which is why a testimonial section lower down the page can afford to be slower.

It is also the section that breaks most often, because logos are not a component library. They are hundreds of files drawn by hundreds of different people to no shared spec, and the moment you line six of them up, every one of those decisions becomes your problem.

The optical sizing problem

Set every logo to the same measured height and the row will look wrong. A long wordmark at 40px carries twice the visual weight of a compact roundel at 40px, a mark with a tall ascender reads taller than one without, and a solid black block reads heavier than an outline of identical size.

The correction is optical, not arithmetic: you nudge individual marks up or down and in or out until the row settles, and you do it by eye, at the size it will actually be viewed. The Full width layout locks all six slots to a 40px frame height inside a 1,216px row and lets the widths do whatever they like, from 122px to 167px. That constraint is deliberate. It leaves you one variable to correct instead of two.

Five layouts, including one that runs off the page

Full width is the classic strip: a line of eyebrow text over six logos, 288px tall at 1,440px. Full width dual stacks two rows and grows to 352px. Full width masked is the marquee version, eight logos laid edge to edge under a three-part gradient mask, 200px of fade at each end and 816px clear in the middle, with the first and last marks deliberately running past the container so the row reads as continuing rather than stopping.

Card lifts the strip into a contained panel and lands at 416px. Cards gives every logo its own 292x168 tile in a four by two grid, mark centered at 40px, and that is the layout to reach for when your logos disagree most: the tile boundary does the aligning the marks refuse to do themselves.

Each type comes in default and brand themes, at 1,440px and 375px, in light and dark. Which one you reach for is mostly a question of position: the full width strip chases a hero, while the card grid is heavy enough to be a section of a landing page in its own right.

Swapping in the real thing

Every slot is an instance, so replacing placeholders with real customers is an instance swap rather than a redraw, and the row keeps its spacing while you do it. Figma's guide to editing instances with component properties covers the dropdown. The 180+ free placeholder company logos exist for exactly this gap, when the section is designed and legal has not yet cleared the third name on the list.

Two habits worth keeping: pick one treatment for the whole row, either all monochrome or all full color, never a mix, and check the row at 375px, where six logos become a stack and the weakest mark suddenly has nothing beside it to hide behind.

What a screen reader hears

A logo bar that is pure reassurance, with nothing clickable in it, should be invisible to assistive technology rather than a recital of eight brand names. The W3C's tutorial on decorative images makes the call clear: empty alt, and the section is skipped.

If the logos link somewhere, to a case study or the customer's site, they stop being decorative and the alt text should name the destination instead. That is a handoff note, not a Figma problem, but it is the kind of thing that never gets written down unless somebody writes it down.

In code, Untitled UI React social proof sections are open source, built with Tailwind CSS and React Aria, and cover the same full width, masked, card, and grid layouts with the responsive row-to-stack behavior handled.