Patterns

Logo carousel

Two-column proof section: a text tile beside an infinite LogoLoop strip. Both sides are flat data (a TextTile record and LogoLoop props), so the pairing spreads straight from a query while the pattern owns the layout.

Install

npx shadcn@latest add @alix/logoCarousel

Preview

Teams working across complex sectors

The copy and the logo strip stay separate records so each side can evolve.

Usage

<LogoCarousel
  textTile={{
    bgColor: "primary",
    sectionTitle: {
      title: "Teams working across complex sectors",
      description: "The copy and the logo strip stay separate records.",
      align: "start",
    },
    buttonGroup: {},
  }}
  logos={{ logos: clientLogos, speed: 36, logoHeight: 28 }}
/>

Examples

On a quiet surface

Pick the tile's bgColor per page rhythm. The pattern maps the right button variant to the surface for you.

Trusted across urgent operating moments

The text tile stays simple while the strip owns the brand composition.

<LogoCarousel
  textTile={{
    bgColor: "greyGradient",
    sectionTitle: {
      title: "Trusted across urgent operating moments",
      description: "The text tile stays simple while the strip owns the brand composition.",
      align: "start",
    },
    buttonGroup: {},
  }}
  logos={{ logos: clientLogos, speed: 36, logoHeight: 28 }}
/>

Tuning the strip

The logos prop is the full LogoLoop contract: speed, logo height, gap, hover-pause, and the edge fade are all data.

Client teams that move under pressure

<LogoCarousel
  textTile={{
    bgColor: "sand",
    sectionTitle: { title: "Client teams that move under pressure", align: "start" },
    buttonGroup: {},
  }}
  logos={{ logos: clientLogos, speed: 60, logoHeight: 24, gap: "lg", fade: false }}
/>

With an action

The tile's buttonGroup carries the follow-on path. The button variant is the pattern's opinion, keyed to the surface.

Proof should sit beside the proposition.

Our clients

<LogoCarousel
  textTile={{
    bgColor: "primary",
    sectionTitle: { title: "Proof should sit beside the proposition.", align: "start" },
    buttonGroup: {
      primaryAction: { children: "Our clients", render: <a href="/clients" /> },
    },
  }}
  logos={{ logos: clientLogos, speed: 36, logoHeight: 28 }}
/>

When to use it

Use it for

Proof sections that pair section copy with a moving wall of client or partner logos.
CMS-fed credibility bands: both the tile record and the logo list are flat, serializable data.
Professional-services pages that need credibility signals without turning logos into content cards.

Reach for something else

A standalone moving strip with no copy column. Use LogoLoop instead.
One official brand mark or wordmark. Use Logo instead.
A static logo grid or a bespoke text column. Compose Grid, TextTileDefault, and your own logo treatment directly.

Props

Prop	Type	Default	Description
textTile	TextTileDefaultProps	–	The copy column as one record: surface (bgColor), a SectionTitle's content, and a buttonGroup. The pattern locks the tile's layout and the button variant per surface.
logos	LogoLoopProps	–	The full LogoLoop contract for the strip: logos ({ src, alt, href? }[]), speed, logoHeight, gap, pauseOnHover, fade.