Spotlights - React

View on Figma View on GitHub

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

Please view this example in fullscreen mode. Click the button above.

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.

Please view this example in fullscreen mode. Click the button above.

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)
- $color?: Color (color)
- $image?: Image (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;