---
title: "Spotlights — React"
canonical: https://sky-ui.cf.sky.com/sections/spotlights/react
apiPackages: [{"name":"@sky-uk/ui-sections","representedVersion":"1.2.4"}]
---

# Spotlights — React

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.

```js
import { Spotlights } from '@sky-uk/ui-sections';
```

---

The `Spotlights` section dynamically adjusts its layout based on the number of items provided (maximum of 5). Items are displayed in the order they appear in the `items` array.

| Number of Items | Layout Configuration |  |  |
| --- | --- | --- | --- |
| 1 Item | 1 Landscape Card |  |  |
| 2 Items | 2 x Portrait Cards or 2 x Landscape Cards |  |  |
| 3 Items | 1 x Landscape Card + 2 x Portrait Cards |  |  |
| 4 Items | 4 x Portrait Cards |  |  |
| 5 Items | 1 x Landscape Card + 4 x Portrait Cards |  |  |

### Example

```full-screen-react-live
function Example() {
  const content = {
    data: {
      testId: 'testId',
      contentId: 'contentId'
    },
    header: {
      headline: 'Section Headline'
    },
    items: [
      {
        header: {
          $appearance: 'light',
          body: 'Watch 80% of all televised Premier League matches this season live on Sky Sports. Get Sky TV, Netflix, discovery+ and Sky Sports for £35/month',
          headline: 'Sky Sports & Sky Essential TV',
          headlineLevel: 'h2',
          overline: 'Premier League on Sky Sports',
          primaryCta: {
            href: 'https://www.sky.com',
            text: 'Buy now',
            data: {
              testId: 'section-primary-cta',
              trackingDescription: 'tracking description',
              trackingLabel: 'tracking label'
            }
          },
          secondaryCta: {
            onClick: () => {
              alert('Secondary CTA clicked');
            },
            text: 'See all deals',
            data: {
              testId: 'section-secondary-cta',
              trackingDescription: 'tracking description',
              trackingLabel: 'tracking label'
            }
          }
        },
        image: {
          alt: 'Sky Sports & Sky Essential TV',
          portraitSrc:
            'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/blt8c2cdb2f4b41611e/Spotlight-Portait-Cold-Palmer',
          landscapeSrcAlignLeft:
            'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/blt7e85955686e53db6/Spotlight-Landscape-Cold-Palmer'
        }
      },
      {
        header: {
          body: 'The smarter TV range just got better.',
          headline: 'Sky Glass Air TV',
          headlineLevel: 'h2',
          overline: 'The brand new',
          primaryCta: {
            href: 'https://www.sky.com',
            text: 'Buy now',
            data: {
              testId: 'section-primary-cta',
              trackingDescription: 'tracking description',
              trackingLabel: 'tracking label'
            }
          },
          secondaryCta: {
            onClick: () => {
              alert('Secondary CTA clicked');
            },
            text: 'Learn more',
            data: {
              testId: 'section-secondary-cta',
              trackingDescription: 'tracking description',
              trackingLabel: 'tracking label'
            }
          }
        },
        image: {
          alt: 'Sky Glass Air TV',
          portraitSrc:
            'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/blt1501cb96fb41300f/Spotlight-Portait-Glass-Air'
        }
      },
      {
        header: {
          body: 'Our newest hub, with the latest WiFi technology',
          headline: "The UK's fastest broadband speeds from any major provider",
          headlineLevel: 'h2',
          overline: 'Sky Broadband',
          primaryCta: {
            href: 'https://www.sky.com',
            text: 'Buy now',
            data: {
              testId: 'section-primary-cta',
              trackingDescription: 'tracking description',
              trackingLabel: 'tracking label'
            }
          },
          secondaryCta: {
            onClick: () => {
              alert('Secondary CTA clicked');
            },
            text: 'Learn more',
            data: {
              testId: 'section-secondary-cta',
              trackingDescription: 'tracking description',
              trackingLabel: 'tracking label'
            }
          }
        },
        image: {
          alt: 'Sky Broadband',
          portraitSrc:
            'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/blt47d847f9d7689d01/Spotlight-Portait-Broadband'
        }
      }
    ]
  };

  return (
    <>
      <Spotlights {...content} />
    </>
  );
};
```

### Orientation Preference

When two items are provided, users can set the `$orientationPreference` prop to be either `portrait` (default) or `landscape`. When set to `landscape`, the section header alignment is fixed so that the first item aligns left and the second item aligns right.

```full-screen-react-live
function Example() {
  const content = {
    $orientationPreference: 'landscape',
    data: {
      testId: 'testId',
      contentId: 'contentId'
    },
    items: [
      {
        $appearance: 'light',
        header: {
          body: 'Our ultimate TV experience from £14 a month.',
          headline: 'Sky Glass Gen 2',
          headlineLevel: 'h2',
          overline: '2025',
          primaryCta: {
            href: 'https://www.sky.com',
            text: 'Buy now',
            data: {
              testId: 'section-primary-cta',
              trackingDescription: 'tracking description',
              trackingLabel: 'tracking label'
            }
          },
          secondaryCta: {
            onClick: () => {
              alert('Secondary CTA clicked');
            },
            text: 'Learn more',
            data: {
              testId: 'section-secondary-cta',
              trackingDescription: 'tracking description',
              trackingLabel: 'tracking label'
            }
          }
        },
        image: {
          alt: 'Sky Glass Gen 2',
          portraitSrc:
            'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/bltb3ba40958c658d61/Spotlights-orientation-portrait-2.png',
          landscapeSrcAlignLeft:
            'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/blt9d35cbb8d6d71bdc/Spotlights-orientation-landscape-2.png'
        }
      },
      {
        header: {
          body: 'The smarter TV from £6 a month.',
          headline: 'Sky Glass Air',
          headlineLevel: 'h2',
          overline: 'New',
          primaryCta: {
            href: 'https://www.sky.com',
            text: 'Buy now',
            data: {
              testId: 'section-primary-cta',
              trackingDescription: 'tracking description',
              trackingLabel: 'tracking label'
            }
          },
          secondaryCta: {
            onClick: () => {
              alert('Secondary CTA clicked');
            },
            text: 'Learn more',
            data: {
              testId: 'section-secondary-cta',
              trackingDescription: 'tracking description',
              trackingLabel: 'tracking label'
            }
          }
        },
        image: {
          alt: 'Sky Glass Air',
          portraitSrc:
            'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/blt0efc21c28fbbfc2a/Spotlights-orientation-portrait-1.png',
          landscapeSrcAlignRight:
            'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/blt168a562aad21e69f/Spotlights-orientation-landscape-1.png'
        }
      }
    ]
  };

  return (
    <>
      <Spotlights {...content} />
    </>
  );
};
```

### Props

Props marked with `?` are optional. Sections or section elements that do not provide the required props will not render.
The `data` prop support key/value pairs that are rendered as kebab case data attributes on the component.

- $appearance?: `string` (`default` | `light`)
- background?: `object`
  - $theme?: `Gradient` ([gradient](/foundations/gradients/))
  - $color?: `Color` ([color](/foundations/colours/))
  - $image?: `Image` ([image](/components/image/))
- data?: `object`
- header
  - body?: `string`
  - headline: `string`
  - headlineLevel?: `string` (`h1` | `h2` | `h3`)
  - overline?: `string` | `Image`
  - textCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
  - primaryCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
  - secondaryCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
- $orientationPreference?: `string` (`portrait` | `landscape`) defaults to `portrait`
- items: `array` (Max of 5 items)
  - $animated?: `boolean` defaults to `false`
  - $appearance?: `string` (`default` | `light`)
  - header
    - body?: `string`
    - headline: `string`
    - headlineLevel?: `string` (`h1` | `h2` | `h3`)
    - overline?: `string` | `Image`
    - textCta?: `object`
      - text: `string`
      - href?: `string`
      - data?: `object`
      - onClick?: `function`
      - target?: `string`
    - primaryCta?: `object`
      - text: `string`
      - href?: `string`
      - data?: `object`
      - onClick?: `function`
      - target?: `string`
    - secondaryCta?: `object`
      - text: `string`
      - href?: `string`
      - data?: `object`
      - onClick?: `function`
      - target?: `string`
  - image?: `object`
    - landscapeSrcAlignRight?: string;
    - landscapeSrcAlignLeft?: string;
    - portraitSrc: string;
    - alt: string;