Spotlights - Overview

Purpose

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.

Anatomy

The Spotlights section can be broken down into the following elements -

1. Section Heading (Optional)
   Optional content that can give the user extra context if required along with optional Buttons for further actions.

2. Item Heading - Section Heading Component
   Flexible content options to capture attention and communicate the spotlights focus.

3. Background image
   Background image covering the Spotlight card.

Variants & States

• Breakpoint: Mobile, Desktop
• Number of spotlights: One, Two portrait, Two landscape, Three, Four, Five
• Section Headline: On, Off

Mobile

Desktop