CompanyLogoBanner

Overview

A self-contained "trusted by" banner section. Pairs an optional eyebrow + heading + description with a responsive row of partner / customer logos. Use it as a standalone section between hero and content; for marquee-scrolling logos use LogoCloud instead.

Usage

import { CompanyLogoBanner } from '@leanicon/web-builder-library'

;<CompanyLogoBanner
  eyebrow="Trusted by"
  heading="500+ teams ship with Leanicon"
  logos={[
    { src: '/logos/acme.svg', alt: 'Acme' },
    { src: '/logos/globex.svg', alt: 'Globex' },
    { src: '/logos/initech.svg', alt: 'Initech', href: 'https://initech.com' },
    { src: '/logos/umbrella.svg', alt: 'Umbrella' },
  ]}
/>

Variants

Default — eyebrow + heading + grayscale logos

Trusted by

500+ teams ship faster with Leanicon

With description

Customer stories

From early-stage startups to public companies

Teams of every size pick Leanicon to consolidate their marketing stack. We've helped ship hundreds of marketing sites.

Full color (no grayscale)

Set logoStyle="color" to render logos in their original colors — useful when brand recognition matters more than visual harmony.

Powering teams at

Left-aligned heading

Featured in

Press coverage

Bordered

bordered adds top + bottom dividing borders, useful when the banner sits between two same-coloured sections.

Backed by

The best of the industry

Logos only (no header)

Omit eyebrow, heading, and description to render a bare logo row — equivalent to a static <LogoCloud /> with the section padding pre-applied.

Clickable logos

Each LogoItem accepts an optional href. The component renders an anchor with rel="noopener noreferrer" and an aria-label set to the logo's alt text.

<CompanyLogoBanner
  heading="Our partners"
  logos={[
    { src: '/logos/acme.svg', alt: 'Acme', href: 'https://acme.com' },
    { src: '/logos/globex.svg', alt: 'Globex', href: 'https://globex.com' },
  ]}
/>

Notes

Use CompanyLogoBanner for a complete, section-style social-proof block; reach for LogoCloud when you need fine-grained control over the logo render (marquee, custom container, no header).
alt is required on every logo — both for accessibility and for the rendered aria-label when the logo is linked.
The default grayscale treatment desaturates logos and fades them to 60% opacity, restoring full color on hover. Set logoStyle="color" to opt out.
The banner is locale-agnostic — all copy comes from the supplied props.
Pass colorScheme="dark" to force a dark surface even when the surrounding page is light.

Props

Name	Type	Default	Required	Description
`logos`	`LogoItem[]`	—	Yes	Logos to display. 4–8 reads best for a single-row banner.
`eyebrow`	`string`	—	No	Optional uppercase eyebrow above the heading (e.g. "Trusted by").
`heading`	`string`	—	No	Banner heading.
`description`	`string`	—	No	Optional supporting copy under the heading.
`align`	`enum`	`center`	No	Heading / eyebrow alignment. Default `center`.
`logoStyle`	`enum`	`grayscale`	No	Logo visual treatment. Default `grayscale`.
`bordered`	`boolean`	`false`	No	Adds top + bottom dividing borders to the banner.
`colorScheme`	`enum`	—	No	Force a dark surface regardless of the surrounding page.
`className`	`string`	—	No