Logo Wall

The Logo Wall component provides you with client/partner logo displays.

Import

import { LogoWall } from '@nostromo/ui-marketing'
// or
import { LogoWall } from '@nostromo/ui-marketing/logo-wall'

Usage

import { LogoWall } from '@nostromo/ui-marketing'
 
export default function Example() {
  return (
    <LogoWall
      title="Trusted by leading companies"
      logos={[
        { src: "/logo1.png", alt: "Company 1" },
        { src: "/logo2.png", alt: "Company 2" }
      ]}
    />
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { LogoWall } from '@nostromo/ui-marketing' export default function LogoWallExample() { return ( <LogoWall title="Trusted by leading companies" logos={[ { src: "https://via.placeholder.com/150x80?text=Company+1", alt: "Company 1" }, { src: "https://via.placeholder.com/150x80?text=Company+2", alt: "Company 2" }, { src: "https://via.placeholder.com/150x80?text=Company+3", alt: "Company 3" },...

Live Example

☀️

Copy

Storybook →

View Code

import { LogoWall } from '@nostromo/ui-marketing' export default function LogoWallCarouselExample() { return ( <LogoWall title="Trusted by industry leaders" variant="carousel" logos={[ { src: "https://via.placeholder.com/150x80?text=Company+1", alt: "Company 1" }, { src: "https://via.placeholder.com/150x80?text=Company+2", alt: "Company 2" },...

Live Example

☀️

Copy

Storybook →

View Code

import { LogoWall } from '@nostromo/ui-marketing' export default function LogoWallMinimalExample() { return ( <LogoWall variant="default" logos={[ { src: "https://via.placeholder.com/120x60?text=Logo+1", alt: "Logo 1" }, { src: "https://via.placeholder.com/120x60?text=Logo+2", alt: "Logo 2" }, { src: "https://via.placeholder.com/120x60?text=Logo+3", alt: "Logo 3" },...

Code Examples

Props

Prop	Type	Default	Required	Description
`logos`	`LogoItem[]`	-	Yes	Array of logo objects (see LogoItem interface below)
`title`	`string`	`undefined`	No	Section title
`subtitle`	`string`	`undefined`	No	Section subtitle
`variant`	`"default" \| "grid" \| "carousel"`	`"default"`	No	Display variant
`itemVariant`	`"default" \| "outline" \| "filled"`	`"default"`	No	Visual variant for logo items
`itemHover`	`"none" \| "scale" \| "opacity"`	`"scale"`	No	Hover effect for items
`itemSize`	`"sm" \| "md" \| "lg"`	`"md"`	No	Size of logo items
`imageFilter`	`"none" \| "grayscale" \| "sepia"`	`"none"`	No	Image filter effect
`showTitle`	`boolean`	`true`	No	Whether to show section title
`showCount`	`boolean`	`false`	No	Whether to show logo count
`maxLogos`	`number`	`undefined`	No	Maximum number of logos to display
`onLogoClick`	`(logo: LogoItem) => void`	`undefined`	No	Callback when logo is clicked
`className`	`string`	`undefined`	No	Additional CSS classes
`itemClassName`	`string`	`undefined`	No	Additional CSS classes for items

LogoItem Interface

interface LogoItem {
  src: string;
  alt: string;
  href?: string;
  name?: string;
}

Gallery FAQ