Logo Grid

Description

The Logo Grid component is designed to showcase a collection of logos in a responsive grid layout. It's ideal for displaying partner logos, client lists, or brand affiliations. The component features a customizable header and a grid of logo images, each of which can be linked to external or internal pages.

Installation

sabaccui add logoGrid

Usage

Here's an example of how to use the Logo Grid component in a Storyblok block:

Schema

header

• Type: text
• Description: A text field for the title or description of the logo grid section.
• Default: Empty string

logos

• Type: bloks
• Description: An array of imageLink components, each representing a logo with its image and link properties.
• Constraints: Only allows imageLink components
• Default: Empty array

Related Components

• ImageLink

Notes

1. The logos are displayed in a responsive grid layout, automatically adjusting based on screen size.
2. Each logo is rendered as a grayscale image (brightness-0 and invert CSS classes) to maintain visual consistency.
3. The component uses the buildLink helper function to construct proper URLs for the logo links.
4. The grid layout uses Flexbox for alignment and spacing, with customizable gap properties.
5. The header is styled as uppercase, bold, and centered, with a gray color for subtle emphasis.
6. When implementing this component, ensure that the logo images are appropriately sized and optimized for web display.
7. The component is nestable, allowing it to be used within other complex layouts or components.
8. It's tagged as an "Organism" in the component hierarchy, indicating its role as a larger, self-contained section of the UI.