# Logo grid
Displays a grid of logos with optional heading and supporting text, commonly used for showcasing partners, clients, or integrations.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](http://localhost:3016/cms/screenshot?file=components%2Flogo-grid-default.png) |

## What it looks like
The component displays content in a centered, single-column layout within a full-width section. An optional main heading appears at the top, followed by an optional supporting text paragraph below it. The logos are arranged in a responsive grid: 3 columns on mobile, 6 columns on tablet, and 8 columns on laptop and larger screens. All logos are centered within their grid cells with consistent vertical and horizontal spacing.

## Typography
- **Main heading**: Uses heading level determined by `getSizingInformation` based on `textSize` and section `index` (h1 for first section, h2 for subsequent sections by default). Applies corresponding typography class (`h1`, `h2`, `h3`, etc.)
- **Supporting text**: Always uses `h3`-equivalent typography class from the sizing information, regardless of the actual HTML element (always renders as `p`)
- **Text sizing**: Follows the `textSize` field mapping where Small uses smaller heading classes, Medium uses standard classes, and Large uses the largest available classes

## Colours
Background and text colours can be set by authors through the `backgroundColour`, `hexColor`, and `textColour` fields. Valid palette names from the theme include: Black, Gray, Deep Purple, Turquoise, Green Light, Light Gray, Purple Dark, Green, Purple, Yellow, Teal, Orange, Blue, Light Purple, Light Yellow, Light Teal, Light Orange, Light Blue, Pale Purple, Pale Yellow, Pale Teal, Pale Orange, Pale Blue, White, and all numbered Gray variants (Gray 1-8). Logo images automatically invert to white when displayed on dark backgrounds.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| heading | Symbol | Displays as main heading above the logo grid | No heading appears |
| postHeading | Symbol | Displays as supporting text below the main heading | No supporting text appears |
| otherMedia | Media | Displays logos in responsive grid layout | No logo grid appears |
| backgroundColour | Symbol | Sets section background color from theme palette | Uses default/inherited background |
| hexColor | Symbol | Sets custom background color and auto-determines text contrast | Uses backgroundColour or default |
| textColour | Symbol | Sets section text color from theme palette | Uses auto-determined or default text color |
| textSize | Symbol | Controls typography sizing (Small/Medium/Large) | Defaults to Medium sizing |
| anchor | Symbol | Creates anchor link for page navigation | No anchor link available |

## Behaviour
The component conditionally renders each content section - if no heading is provided, the heading area doesn't appear; same for supporting text and logos. Logo images automatically receive brightness and invert filters when displayed on dark backgrounds (determined by color luminance calculation). The grid layout is responsive and uses CSS Grid with different column counts per breakpoint. Content is always centered horizontally within the section.

## Impact of content changes
- **Adding/removing heading**: Main title appears or disappears from top of component
- **Adding/removing postHeading**: Supporting text appears or disappears below heading
- **Adding/removing otherMedia logos**: Entire logo grid appears or disappears
- **Changing textSize**: All typography scales up or down according to size mapping
- **Changing background colors**: Section background updates and logos auto-adjust contrast (invert on dark backgrounds)