---
title: "Spotlights"
canonical: https://sky-ui.cf.sky.com/sections/spotlights
---

# Spotlights

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.

## 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](https://www.figma.com/design/Iuy4ttzO5BxHD7qE7zXN1s/Sky-UI---Web-Components?node-id=42655-23272) (Optional)** <br /> Optional content that can give the user extra context if required along with optional Buttons for further actions.

2. **Item Heading - [Section Heading Component](https://www.figma.com/design/Iuy4ttzO5BxHD7qE7zXN1s/Sky-UI---Web-Components?node-id=42655-23272)** <br /> Flexible content options to capture attention and communicate the spotlights focus.

3. **Background image** <br />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