“Brands we work with” proof for agency and SaaS homepages. Logos sit at an equal optical height, greyscale until hover; dark sections use each logo's dark artwork instead of invert(). The marquee is pure CSS and stops on hover, focus and reduced motion.
Running the sites of 120+ businesses since 2014
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { LogoStrip } from "@vamos-ui/react/blocks";
<LogoStrip
caption="Running the sites of 120+ businesses since 2014"
logos={[{ name: "Kıyı Meyhane", image: { src: "/logos/kiyi.svg", width: 160, height: 40 }, imageDark: { … } }]}
/>If the logo strip scrolls, nothing else on the page should move continuously (D6-10).
Examples
Marquee
Endless band with masked edges; the duplicate copy is aria-hidden and not focusable. Fewer than 4 logos render as a row (lint suggests row below 6).
Restaurants, clinics and hotels we work with
Grid with gridlines
4–6 columns separated by 1px lines; linked logos go to the case study.
Clients, 2024–2026
API
LogoStrip
| Prop | Type | Default |
|---|---|---|
variantLayout (see examples). | "row" | "marquee" | "grid" | "row" |
captionSmall caption; also names the region. | ReactNode | — |
logos{ name, image, imageDark?, link? } — name is the alt text. | LogoItem[] | — |
monochromegrayscale(1) at 70% opacity; full colour on hover/focus. | boolean | true |
columnsgrid: columns on wide containers. | 4 | 5 | 6 | 5 |
speedmarquee: seconds per loop. | number (s) | 40 |
theme / anchor / id / className / labels / locale / components / editModeShared block props. | BlockBaseProps | — |