Logo clouds, partner grids, and trust strips answer “who uses this?” without a wall of screenshots. LogoCloud rotates logos; Grid + Logo works for static grids.
What this pattern covers
Social proof blocks appear on marketing heroes, pricing pages, and signup flows:
LogoCloud — animated grid that rotates through a logo set
Logo — brand mark with light/dark variants
Grid — static partner wall when rotation is unnecessary
AutoScroll — horizontal marquee for dense logo strips (describe in prose)
LogoCloud extends Grid. Pass a logos array of Logo props — each entry is the same shape you would pass to Logo directly.Describe in prose:
logos — full partner list
limit — how many show at once (default 6)
rotationInterval — milliseconds between rotations when logos.length > limit
Always set columns on the grid — the catalog warns LogoCloud needs explicit column counts at breakpoints
Typical hero placement: centered Column under the headline, gap="24", with a weak label:
<Column gap="24" horizontal="center" fillWidth>
<Text variant="label-default-s" onBackground="neutral-weak">
Trusted by teams at
</Text>
{/* LogoCloud — logos prop wired in your app */}
</Column>
Static logo grid
When you have six logos and no animation, use Grid + Logo (pass dark, light, size, and optional href per partner):
AutoScroll wraps children in a horizontal infinite scroll — useful when logos exceed viewport width.
Describe in prose: wrap a Row of Logo components inside AutoScroll, set speed conservatively, and pause on hover if your UX research says users need to read marks. Prefer LogoCloud rotation when you want discrete swaps instead of continuous motion.
Write this / not this
✅ Once UI way
❌ Common mistake
LogoCloud with `columns` at breakpoints
Default grid with squashed logos
Weak label above logos
Logos same size as headline
Logo `dark` + `light` assets
Single PNG on wrong theme
Static Grid for ≤6 partners
LogoCloud rotation for tiny sets
Check yourself
Trust strip sits below primary CTA, not above headline
Logo assets include theme variants
Grid columns collapse on s / m breakpoints
Links use href on Logo when partners should be clickable
