Logo Wall

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

Live Examples

Live Example

☀️

Copy

View Code

import { LogoWall } from '@jarllyng/nostromo' export default function LogoWallExample() { return ( <LogoWall title="Trusted by leading companies" logos={[ { id: 'logo1', name: 'Company 1', logo: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='80'%3E%3Crect width='100%25' height='100%25' fill='%23e4e4e7'/%3E%3Ctext x='50%25' y='50%25' font-family='sans-serif' font-size='14' fill='%2371717a' text-anchor='middle' dy='.35em'%3ECompany%201%3C/text%3E%3C/svg%3E", alt: "Company 1" }, { id: 'logo2', name: 'Company 2', logo: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='80'%3E%3Crect width='100%25' height='100%25' fill='%23e4e4e7'/%3E%3Ctext x='50%25' y='50%25' font-family='sans-serif' font-size='14' fill='%2371717a' text-anchor='middle' dy='.35em'%3ECompany%202%3C/text%3E%3C/svg%3E", alt: "Company 2" }, { id: 'logo3', name: 'Company 3', logo: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='80'%3E%3Crect width='100%25' height='100%25' fill='%23e4e4e7'/%3E%3Ctext x='50%25' y='50%25' font-family='sans-serif' font-size='14' fill='%2371717a' text-anchor='middle' dy='.35em'%3ECompany%203%3C/text%3E%3C/svg%3E", alt: "Company 3" },...

Live Example

☀️

Copy

View Code

import { LogoWall } from '@jarllyng/nostromo' export default function LogoWallCarouselExample() { return ( <LogoWall title="Trusted by industry leaders" itemVariant="ghost" logos={[ { id: 'logo7', name: 'Company 7', logo: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='80'%3E%3Crect width='100%25' height='100%25' fill='%23e4e4e7'/%3E%3Ctext x='50%25' y='50%25' font-family='sans-serif' font-size='14' fill='%2371717a' text-anchor='middle' dy='.35em'%3ECompany%201%3C/text%3E%3C/svg%3E", alt: "Company 1" }, { id: 'logo8', name: 'Company 8', logo: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='80'%3E%3Crect width='100%25' height='100%25' fill='%23e4e4e7'/%3E%3Ctext x='50%25' y='50%25' font-family='sans-serif' font-size='14' fill='%2371717a' text-anchor='middle' dy='.35em'%3ECompany%202%3C/text%3E%3C/svg%3E", alt: "Company 2" },...

Live Example

☀️

Copy

View Code

import { LogoWall } from '@jarllyng/nostromo' export default function LogoWallMinimalExample() { return ( <LogoWall itemVariant="default" logos={[ { id: 'logo12', name: 'Company 12', logo: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='100%25' height='100%25' fill='%23e4e4e7'/%3E%3Ctext x='50%25' y='50%25' font-family='sans-serif' font-size='14' fill='%2371717a' text-anchor='middle' dy='.35em'%3ELogo%201%3C/text%3E%3C/svg%3E", alt: "Logo 1" }, { id: 'logo13', name: 'Company 13', logo: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='100%25' height='100%25' fill='%23e4e4e7'/%3E%3Ctext x='50%25' y='50%25' font-family='sans-serif' font-size='14' fill='%2371717a' text-anchor='middle' dy='.35em'%3ELogo%202%3C/text%3E%3C/svg%3E", alt: "Logo 2" }, { id: 'logo14', name: 'Company 14', logo: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='100%25' height='100%25' fill='%23e4e4e7'/%3E%3Ctext x='50%25' y='50%25' font-family='sans-serif' font-size='14' fill='%2371717a' text-anchor='middle' dy='.35em'%3ELogo%203%3C/text%3E%3C/svg%3E", alt: "Logo 3" },...

Import


import { LogoWall } from "@jarllyng/nostromo";
// or
import { LogoWall } from "@jarllyng/nostromo/logo-wall";

Usage


import { LogoWall } from "@jarllyng/nostromo";
 
export default function Example() {
  return (
    <LogoWall
      title="Trusted by leading companies"
      logos={[
        {
          src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='80'%3E%3Crect width='100%25' height='100%25' fill='%23e4e4e7'/%3E%3Ctext x='50%25' y='50%25' font-family='sans-serif' font-size='14' fill='%2371717a' text-anchor='middle' dy='.35em'%3ELogo%201%3C/text%3E%3C/svg%3E",
          alt: "Company 1",
        },
        {
          src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='80'%3E%3Crect width='100%25' height='100%25' fill='%23e4e4e7'/%3E%3Ctext x='50%25' y='50%25' font-family='sans-serif' font-size='14' fill='%2371717a' text-anchor='middle' dy='.35em'%3ELogo%202%3C/text%3E%3C/svg%3E",
          alt: "Company 2",
        },
      ]}
    />
  );
}

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;
}