# Logo row
Displays a horizontal row of logo images with an optional heading, typically used to showcase clients, partners, or certifications.

## Screenshots

| Variant | Preview |
|---------|---------|
| deep purple | ![deep purple](screenshot-logo-row-deep-purple.png) |
| default | ![default](screenshot-logo-row-default.png) |

## What it looks like
Full-width section with optional centered heading above a horizontal grid of logos. The heading spans the full column width with center alignment. Logo images are arranged in a responsive grid that flows horizontally on desktop and wraps on smaller screens, with consistent spacing and center alignment.

## Typography
- **Heading**: Uses `h5` class regardless of content, but renders as `h1` element if component index is 0, otherwise `h2` element
- **Vertical spacing**: Heading has `py-20` (20px top/bottom padding)

## Colours
Full section background and text colours apply via the Section wrapper. Valid palette names: Black, Gray, Deep Purple, Turquoise, PurpleHover, Green Light, Light Gray, Gray 1-6, Gray 8, Gray Line, Backdrop Dark, Purple Dark, Green, Red, Purple, Yellow, Teal, Orange, Blue, Secondary Deep Purple, Accessible Purple, Accessible Teal, Light Purple, Light Yellow, Light Teal, Light Orange, Light Blue, Pale Purple, Pale Yellow, Pale Teal, Pale Orange, Pale Blue, White. 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 centered heading text above logos | No heading appears |
| otherMedia | Media | Displays logos in horizontal grid layout | No logos section appears |
| backgroundColour | Symbol | Sets section background colour from palette | Uses default/transparent background |
| hexColor | Symbol | Sets custom hex background colour with auto text contrast | Uses backgroundColour or default |
| textColour | Symbol | Sets section text colour from palette | Uses auto-determined contrast colour |
| anchor | Symbol | Creates page anchor/ID for navigation | No anchor available |

## Behaviour
Logo images automatically receive brightness and invert filters when displayed on dark backgrounds (determined by hex colour luminance or predefined dark palette colours). The component renders nothing if both heading and logos are empty. Logos are arranged in an auto-flowing grid that maintains aspect ratios and centers within available space.

## Impact of content changes
- **Add/remove heading**: Shows/hides the centered title section above logos
- **Add/remove logos**: Shows/hides the entire logo grid section
- **Change background to dark colour**: Automatically inverts logo images to white for better contrast
- **Change background to light colour**: Shows logos in original colours without filters