Logo Components

Components for displaying partner logos, integrations, and supported tools.

---

LogoGrid

Responsive Grid Layout

Display logos in a responsive grid. Adapts from 4 columns on desktop to 1 on mobile. Supports multiple variants and alignment options.

Responsive

Auto-adapts: 4 → 3 → 1 columns

Flexible Layout

Grid or horizontal row modes

Configurable

Variants, alignment, custom columns

LogoGrid Props

Prop	Type	Default	Description
items	LogoItem[]	required	Array of logo items
title	string	-	Optional section title
size	number	48	Logo size in pixels
showNames	boolean	false	Show name labels
columns	number	-	Fixed columns (overrides responsive)
variant	'default' | 'compact' | 'card'	'default'	Visual style
fluid	boolean	false	Use auto-fit
layout	'grid' | 'row'	'grid'	Layout mode
mobileLayout	'grid' | 'row'	-	Mobile override
align	'start' | 'center' | 'end'	'center'	Item alignment
justify	'start' | 'center' | 'end' | 'between' | 'around'	'start'	Row justify

LogoItem Interface

interface LogoItem {
  name: string       // Brand name (for BrandIcon)
  href?: string      // Link URL
  image?: string     // Custom image path
  description?: string
}

---

LogoGrid Examples

With Names

OracleGitHubAWSRed HatVMwareMicrosoftDockerKubernetes

Card Variant

MITREDISACIS

Compact Variant

Row Layout (Horizontal Scroll)

Fluid (Auto-fit)

Single Column

MITREDISACIS

Mobile Row, Desktop Grid

Resize your browser to see different layouts:

OracleGitHubAWSRed HatVMwareMicrosoftDockerKubernetes

---

LogoMarquee

Animated Scrolling Display

Create visual interest with continuously scrolling logos. Perfect for showcasing many integrations or partners.

Multi-Row

Split items across rows with alternating directions

Customizable

Speed, direction, size, overlay

Accessible

Respects reduced motion preferences

LogoMarquee Props

Prop	Type	Default	Description
items	LogoItem[]	required	Array of logo items
duration	number	30	Animation seconds
pauseOnHover	boolean	true	Pause on hover
reverse	boolean	false	Reverse direction
size	number	40	Logo size in pixels
repeat	number	2	Repeats for seamless loop
overlay	boolean	true	Gradient fade at edges
rows	number	1	Number of rows
alternateDirection	boolean	true	Alternate per row
verticalAlign	'start' | 'center' | 'end'	'center'	Vertical alignment

---

LogoMarquee Examples

Single Row

Reversed Direction

Multi-Row (2 Rows)

Multi-Row (4 Rows)

No Overlay

Same Direction (No Alternating)

---

Real-World Examples

Partners Section

Trusted by Industry Leaders

Horizontal PageSection Example

PageSection with LogoMarquee

Demonstrates using LogoMarquee as the visual element in a two-column layout.

Learn More

Key Partners (Card Grid)

Project Partners

MITREDISACIS