Logo Cloud Section
Horizontal logo strip with grayscale-to-color hover effect.
Preview
Import
import { LogoCloudSection } from "@sigil-ui/components";Usage
<LogoCloudSection heading="Works with your stack" logos={[{ name: "React", logo: <BrandLogo name="react" className="size-8" /> }, { name: "Next.js", logo: <BrandLogo name="nextdotjs" className="size-8" /> }, { name: "TypeScript", logo: <BrandLogo name="typescript" className="size-8" /> }, { name: "Tailwind CSS", logo: <BrandLogo name="tailwindcss" className="size-8" /> }]} />Without heading
<LogoCloudSection
heading=""
logos={logos}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | "Trusted by teams at" | Text above the logo row |
logos | LogoCloudItem[] | required | Array of { name, logo } where logo is a ReactNode (SVG or img) |
className | string | — | Additional CSS classes |
Logos render at 24px height with grayscale filter that clears on hover.
Plus all standard <section> HTML attributes.