Spotlights - Usage

Basic Guidelines

The Spotlights Section is a highly flexible component designed to showcase featured products or services, drawing attention to key offerings with customisable yet consistent layouts and content.

Content Guidance

Please refer to the Section Heading documentation for detailed guidance.

Character limits

There are no character limits on the Spotlights section, however we do recommend you try to keep the amount of content consisted between each Spotlight within the section.

Image ratio

Please see the image sizes page for more information on what image formats need to be provided.

Alignment

Sections are always placed at full width of the viewport.

Mobile

Desktop

The below example has been downsized proportionally to fit into this documentation.

Horizontal alignment

When two sections are positioned side by side horizontally, their height is determined by the taller section. In React, this behaviour is handled automatically. However, in Figma, the designer must manually set the height of the shorter section to Fill container (as it defaults to Hug contents).

Colour Usage

The background of all Discovery sections must remain white as per brand guidelines. However, the Section Headline that appears in the individual Spotlight cards may be changed to the light variant if needed, to ensure sufficient contrast against the background image.