Logo Section

A flexible logo showcase component designed to build trust and credibility by displaying client logos, partner brands, or technology stack. Perfect for landing pages, about sections, and testimonial pages with multiple layout options and visual styles.

Features

• Multiple Layouts: Grid, marquee, and centered arrangements
• Visual Variants: Default, grayscale, and bordered styles
• Responsive Design: Adapts to all screen sizes automatically
• Interactive Elements: Hover effects and smooth animations
• Flexible Configuration: Customizable columns and spacing
• Accessibility: Proper alt text and keyboard navigation

Basic Usage

import LogoSection from "@/components/block/LogoSection.astro"

const logos = [
  {
    name: "Company A",
    src: "/logos/company-a.svg",
    alt: "Company A Logo",
    href: "https://company-a.com"
  },
  {
    name: "Company B", 
    src: "/logos/company-b.svg",
    alt: "Company B Logo"
  }
];

<LogoSection
  title="Trusted by leading companies"
  tagline="Our partners"
  description="Join thousands of companies that trust our platform."
  logos={logos}
  variant="grayscale"
/>

Examples

Grayscale Grid Layout

Our clients

Trusted by Industry Leaders

Join thousands of companies worldwide who trust our documentation platform to create, manage, and scale their technical content.

Bordered Layout with Names

Powered by

Technology Partners

Built with industry-leading technologies and trusted by our technology partners.

React

TypeScript

Node.js

PostgreSQL

Marquee Layout

Trusted by companies

Showcase that builds trust

Continuous display of partner logos with smooth scrolling animation.

Centered Layout

Strategic alliances

Featured Partners

Our key partnerships that drive innovation and excellence.

500+

Happy Clients

50+

Countries

99.9%

Uptime

Props

Logo Interface

interface Logo {
  name: string;          // Logo name (required)
  src: string;           // Image source URL (required)
  alt?: string;          // Alt text for accessibility
  href?: string;         // Optional link URL
  width?: number;        // Optional image width
  height?: number;       // Optional image height
}

Layout Types

Grid Layout

Perfect for organized display of multiple logos:

• Responsive auto-fit grid system
• Automatic sizing based on content
• Equal spacing and alignment
• Adapts to any number of logos

<LogoSection layout="grid" logos={logos} />

Marquee Layout

Great for continuous brand showcase:

• Smooth horizontal scrolling
• Infinite loop animation
• Pause on hover interaction
• Ideal for many logos or limited space

<LogoSection layout="marquee" autoplay={true} logos={logos} />

Centered Layout

Best for highlighting key partnerships:

• Centered arrangement
• Flexible responsive behavior
• Perfect for 3-6 important logos
• Great for hero sections

<LogoSection layout="centered" logos={logos} />

Visual Variants

Default Variant

Clean, colorful logo display:

• Logos shown in full color
• Subtle hover effects
• Professional appearance

<LogoSection variant="default" logos={logos} />

Grayscale Variant

Unified, professional look:

• Logos converted to grayscale
• Color appears on hover
• Creates visual consistency
• Most popular choice

<LogoSection variant="grayscale" logos={logos} />

Bordered Variant

Card-based logo presentation:

• Individual cards for each logo
• Subtle shadows and borders
• More prominent display
• Good for fewer, important logos

<LogoSection variant="bordered" logos={logos} />

Interactive Features

Clickable Logos

Make logos clickable by adding href property:

const logos = [
  {
    name: "Partner Company",
    src: "/logo.svg",
    href: "https://partner.com",
    alt: "Partner Company Logo"
  }
];

Logo Names

Display company names below logos:

<LogoSection showNames={true} logos={logos} />

Custom Content

Use the slot to add statistics, CTAs, or additional information:

<LogoSection title="Our Partners" logos={logos}>
  <div class="logo-stats">
    <div class="logo-stat">
      <div class="logo-stat-number">1000+</div>
      <div class="logo-stat-label">Companies</div>
    </div>
    <div class="logo-stat">
      <div class="logo-stat-number">50M+</div>
      <div class="logo-stat-label">Users Served</div>
    </div>
  </div>
  
  <a href="/docs-site-kickstarter/partners" class="logo-cta">
    Become a Partner
  </a>
</LogoSection>

Responsive Behavior

• Desktop: Auto-fit grid with optimal logo sizing
• Tablet: Adjusted minimum sizes for better fit
• Mobile: Two-column layout for space efficiency
• Small Mobile: Single column for optimal viewing

Accessibility Features

• Alt Text: Proper image descriptions for screen readers
• Keyboard Navigation: Tab navigation for clickable logos
• Focus Indicators: Clear focus states for interactive elements
• Semantic HTML: Proper heading hierarchy and structure

Performance Optimization

Image Optimization

const logos = [
  {
    name: "Company",
    src: "/logos/company.svg", // Use SVG when possible
    width: 120,               // Specify dimensions
    height: 60,
    alt: "Company Logo"
  }
];

Lazy Loading

For many logos, consider lazy loading:

<!-- Add loading="lazy" to images -->
<img src={logo.src} alt={logo.alt} loading="lazy" />

Best Practices

1. Logo Quality: Use high-resolution, vector-based logos when possible
2. Consistent Sizing: Maintain consistent visual weight across logos
3. Permission: Ensure you have permission to use company logos
4. Relevance: Only include logos of actual clients or partners
5. Updates: Keep logo collection current and remove outdated partnerships

Common Use Cases

• Client Showcases: Display customer logos for social proof
• Technology Stack: Show tools and technologies used
• Partner Networks: Highlight strategic partnerships
• Investor Relations: Display investor or funding partner logos
• Conference Sponsors: Show event sponsors or supporters
• Integration Partners: Display API or platform integrations

Logo Guidelines

File Formats

• SVG: Best for scalability and small file sizes
• PNG: Good for complex logos with transparency
• WebP: Modern format with excellent compression

Sizing Recommendations

• Standard: 120x60px for horizontal logos
• Square: 80x80px for square/circular logos
• Vertical: 60x120px for tall logos

Color Considerations

• Use consistent background colors
• Ensure sufficient contrast
• Test grayscale conversion for readability
• Consider dark/light theme variations

Integration Examples

Static Logos

const staticLogos = [
  { name: "Company A", src: "/logos/a.svg", alt: "Company A" },
  { name: "Company B", src: "/logos/b.svg", alt: "Company B" }
];

Dynamic Logos

// Fetch from CMS or API
const logos = await fetch('/api/partners').then(res => res.json());

Conditional Display

{logos.length > 0 && (
  <LogoSection logos={logos} title="Our Partners" />
)}