# Logo ticker
Displays a horizontal scrolling ticker of logos with an optional heading, typically used to showcase client logos or partner brands.

## Screenshots

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

## What it looks like
The component renders as a full-width section with optional heading text centered above a horizontally scrolling row of logos. The heading spans the full container width with vertical padding. Below it, logos are displayed in a continuous ticker that automatically scrolls from right to left at 30px/second speed, slowing to 20px/second on hover. Logos are vertically centered and maintain their aspect ratios.

## Typography
- Heading uses dynamic heading levels: `h1` class for first component on page (index 0), `h2` class for subsequent components
- Heading element semantics follow the same pattern: actual h1 element for index 0, h2 element otherwise
- Heading applies `h5` typography class with center alignment

## Colours
Background and text colours apply to the full section via the Section wrapper. Authors can select from any palette colour for both background and text. When a custom hex colour is set, logo images are automatically inverted (`brightness-0 invert` classes) on dark backgrounds to ensure visibility.

Available palette colours: Black, Gray, Deep Purple, Turquoise, PurpleHover, Green Light, Light Gray, Gray 1, Gray 2, Gray 3, Gray 4, Gray 5, Gray 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.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| heading | Symbol | Displays centered heading text above logo ticker | No heading appears, only logo ticker shows |
| otherMedia | Media | Creates scrolling ticker of logo images | No ticker displays, component shows only heading if present |
| backgroundColour | Symbol | Sets section background to selected palette colour | Uses default transparent background |
| hexColor | Symbol | Sets custom hex background colour and inverts logos on dark backgrounds | Uses backgroundColour or default background |
| textColour | Symbol | Sets heading text colour to selected palette colour | Uses default text colour based on background contrast |
| anchor | Symbol | Adds HTML id attribute for page linking | No anchor link available |

## Behaviour
Logo ticker automatically scrolls continuously from right to left. Scrolling speed reduces on hover interaction. Logos are filtered for brightness/inversion based on background darkness calculated from either hex colour or selected background colour. Component renders heading and ticker as separate full-width elements. Empty logo arrays prevent ticker rendering entirely.

## Impact of content changes
- **Add/remove heading**: Heading section appears/disappears above logos
- **Add/remove logos**: Ticker section appears/disappears, affects overall component height
- **Change background to dark colour**: Logos automatically invert to white for visibility
- **Change background to light colour**: Logo inversion removes, showing original logo colours
- **Modify logo count**: Affects ticker width and scroll duration but maintains same speed