Logo Strip

Scrolls a row of customer logos in a loop, in one colour. Sites pass their own logos as children and set their own claim beside it.

When to use

A hero or section footer that backs a claim with the customers who use Clinia.

When not to use

Two brands side by side, such as a partnership announcement: use a co-branding lockup. See Co-branding.
A product (base-luma) surface.

Install

npx shadcn@latest add @clinia/logo-strip

Usage

tsx

import { LogoStrip } from "@/components/ui/logo-strip";

<p id="customers">Built for frontier teams, trusted by ambitious builders</p>
<LogoStrip aria-labelledby="customers">
  <TelusLogo role="img" aria-label="TELUS" className="h-[22px] w-auto" />
  <img src="/logos/chum.svg" alt="CHUM" className="h-[15px] dark:hidden" />
  <img src="/logos/chum-white.svg" alt="CHUM" className="hidden h-[15px] dark:block" />
</LogoStrip>

Clinia rules

Show a logo only with the customer's written approval, confirmed by the marketing lead.
Pass each logo as a child, from the site's own files. An SVG in currentColor draws in foreground at 40%, so one file serves both themes. An <img> keeps its own colours and needs a file for each theme.
Size each logo by eye to the same visual weight. Equal heights make wide wordmarks look larger.

States

reduced motion

Toggle the site theme to review both themes.

Accessibility

Built in

The logos form a list. Pass aria-labelledby pointing at the claim beside it, or aria-label, to name it.
The copies that keep the loop going are inert: out of the tab order and hidden from screen readers, so each logo is read once.
The loop pauses on hover and off screen.
Under prefers-reduced-motion the logos sit still on one line. A row wider than the strip scrolls sideways and becomes a named region in the tab order, so keyboard users can scroll it with the arrow keys. A row that fits adds no tab stop.

Your responsibility

Name every logo with the company name: aria-label and role="img" on an SVG, or alt on an image.
Name the list: aria-labelledby pointing at the claim beside the strip, or aria-label when there is none.

How to test

With a screen reader, reach the strip: it reads the list's name, then each company name once.
Hover the strip: the logos stop, and move again when the pointer leaves.
Turn on reduced motion and narrow the window until the logos no longer fit: they stay on one line and scroll sideways. Tab reaches the strip, the arrow keys scroll it, and a screen reader announces the region with the list's name.
Widen the window until every logo fits: Tab skips the strip.

API

Prop	Values	Default	Description
duration	`number`	`30`	Seconds for one full pass of the logos.
still	`boolean`	`false`	Holds the logos still, as under reduced motion, whatever the user's motion setting.

All other props come from the native div element.