Logo Cloud One

The Logo Cloud One block is a simple, composable logo cloud section that displays a series of brand or partner logos in an auto-scrolling carousel. It loops continuously, pausing on hover or focus for accessibility.

npx shadcn@latest add @rokkit200-ui/logo-cloud-one

Preview

Code

import mockedLogoCloudBlock from "@/data/mock/optimizely/logo-cloud/logo-cloud-block.json";
import { logoCloudCmsMappers } from "@/registry/rokkit200-ui/blocks/logo-cloud/internals/lib/logo-cloud-utils";
import { LogoCloudOne } from "@/registry/rokkit200-ui/blocks/logo-cloud/variants/logo-cloud-one/logo-cloud-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";
import { logoCloudBlockCodeModel, logoCloudBlockFragment } from "./constants";

export default function LogoCloudOneDefaultDemo() {
    const properties = mapCmsType(
        logoCloudCmsMappers,
        mockedLogoCloudBlock.data.LogoCloudBlock.item.Items
    );

    return <LogoCloudOne {...properties!} />;
}

Code Model

WIP

GraphQL Query

query HeroBlockQuery {
    HeroBlock {
      item {
        ...HeroBlockFragment
      }
    }
  }

  fragment HeroBlockFragment on HeroBlock {
    Heading
    MainBody {
      json
    }
    Links {
      __typename
      url {
        type
        default
        hierarchical
        internal
        graph
        base
        __typename
      }
      target
      text
      title
    }
    Media {
      ... on ImageMedia {
        AltText
        _metadata {
          url {
            default
          }
        }
        _imageMetadata {
          width
          height
        }
      }
    }
  }

Composition

LogoCloudOne is assembled from the following components:

Component	Role
Carousel	Provides the auto-scrolling, looping slide behaviour
ContentImage	Renders each logo with responsive <picture> support

Shared internals (logo-cloud-internals) provide the LogoCloudProperties type, image profile, and CMS mapper utilities used by all logo cloud variants.

Usage

Below is an example of how to use LogoCloudOne in your site.

import { LogoCloudOne } from "@/rokkit200-ui/blocks/logo-cloud/variants/logo-cloud-one/logo-cloud-one";
import { mapCmsType } from "@/rokkit200-ui/lib/content-mapper/content-mapper-util";
import { logoCloudCmsMappers } from "@/rokkit200-ui/blocks/logo-cloud/internals/lib/logo-cloud-utils";

const properties = mapCmsType(logoCloudCmsMappers, logoCloudResponse);

return <LogoCloudOne {...properties!} />;

Customisation

All visual customisation is done via className props — pass Tailwind classes to adjust media styling. No additional CSS or theme tokens are required.

Grayscale

Desaturate logos by default and restore colour on hover, useful for keeping the section visually subdued until a user interacts.

Preview

Code

import mockedLogoCloudBlock from "@/data/mock/optimizely/logo-cloud/logo-cloud-block.json";
import { logoCloudCmsMappers } from "@/registry/rokkit200-ui/blocks/logo-cloud/internals/lib/logo-cloud-utils";
import { LogoCloudOne } from "@/registry/rokkit200-ui/blocks/logo-cloud/variants/logo-cloud-one/logo-cloud-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

export default function LogoCloudOneGrayscaleDemo() {
    const properties = mapCmsType(
        logoCloudCmsMappers,
        mockedLogoCloudBlock.data.LogoCloudBlock.item.Items
    );

    return (
        <LogoCloudOne
            {...properties!}
            mediaClassName="grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all duration-300"
        />
    );
}

Rounded

Apply rounded corners and a subtle shadow to each logo image for a card-like presentation.

Preview

Code

import mockedLogoCloudBlock from "@/data/mock/optimizely/logo-cloud/logo-cloud-block.json";
import { logoCloudCmsMappers } from "@/registry/rokkit200-ui/blocks/logo-cloud/internals/lib/logo-cloud-utils";
import { LogoCloudOne } from "@/registry/rokkit200-ui/blocks/logo-cloud/variants/logo-cloud-one/logo-cloud-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

export default function LogoCloudOneRoundedDemo() {
    const properties = mapCmsType(
        logoCloudCmsMappers,
        mockedLogoCloudBlock.data.LogoCloudBlock.item.Items
    );

    return (
        <LogoCloudOne {...properties!} mediaClassName="rounded-2xl shadow-md" />
    );
}

Bordered

Add a border and inner padding around each logo for a contained, tile-style layout.

Preview

Code

import mockedLogoCloudBlock from "@/data/mock/optimizely/logo-cloud/logo-cloud-block.json";
import { logoCloudCmsMappers } from "@/registry/rokkit200-ui/blocks/logo-cloud/internals/lib/logo-cloud-utils";
import { LogoCloudOne } from "@/registry/rokkit200-ui/blocks/logo-cloud/variants/logo-cloud-one/logo-cloud-one";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

export default function LogoCloudOneBorderedDemo() {
    const properties = mapCmsType(
        logoCloudCmsMappers,
        mockedLogoCloudBlock.data.LogoCloudBlock.item.Items
    );

    return (
        <LogoCloudOne
            {...properties!}
            mediaClassName="rounded-lg border border-slate-200 p-2 dark:border-slate-700"
        />
    );
}

API Reference

LogoCloudOneProperties

Extends LogoCloudProperties (from logo-cloud-internals).

Prop	Type	Default	Description
media	LogoCloudMedia[]	—	Array of image sources and profiles for each logo.
className	string	—	Classes applied to the root <section> element.
textContainerClassName	string	—	Classes applied to the text content wrapper.
headingClassName	string	—	Classes applied to the heading element.
bodyClassName	string	—	Classes applied to the body text wrapper.
linksClassName	string	—	Classes applied to the links wrapper.
mediaContainerClassName	string	—	Classes applied to the media container <div>.
mediaClassName	string	—	Classes applied to each ContentImage element.

Accessibility

• The carousel auto-scrolls with loop enabled, but pauses on mouse enter (stopOnMouseEnter) and on focus (stopOnFocusIn) so users are not forced to interact with moving content.
• Logo images are rendered with decorative set, marking them as presentational. If logos require identification, provide meaningful AltText in the CMS data.
• The carousel carries an aria-label of “Logo Cloud Carousel” for assistive technology.

Related Patterns

• Grouped Content — composing blocks into page sections.