Domain

LogoCloud

Responsive logo grid for “trusted by” sections that display partner/customer brand marks.

import { LogoCloud } from '@lostgradient/cinder/logo-cloud';
marketinglogossocial-proof
01

Overview

Renders a responsive cloud of customer or partner logos with optional links.

Usage

svelte 
<script lang="ts">
  import LogoCloud from '@lostgradient/cinder/logo-cloud';

  const logos = [
    { name: 'Acme', src: '/logos/acme.svg', href: 'https://example.com/acme' },
    { name: 'Globex', src: '/logos/globex.svg' },
    { name: 'Umbra', src: '/logos/umbra.svg' },
  ];
</script>

<LogoCloud title="Trusted by leading teams" {logos} />
Live preview
02

When to use

Use when
  • Displaying customer or partner logos near pricing, hero, or testimonial content.
  • Creating a compact proof strip that links out to partner pages or case studies.
Avoid when
03

Examples

LogoCloud

LogoCloud rendering a trusted-by strip with linked and unlinked logos.

04

Props

Props for logo-cloud
Name Type Default Required Bindable Description
as 'section' | 'div' 'section' Wrapper element tag.
title text Optional heading text for the logo cloud.
description text Optional support text under heading.
logos LogoCloudItem[] req Logos to render in the cloud.
columns 3 | 4 | 5 | 6 5 Grid columns on wide screens.
grayscale boolean true Apply grayscale filter until hover.
maxWidth 'prose' | 'narrow' | 'wide' | 'full' 'wide' Max width token forwarded to Container.