Upsell - React

View on GitHub

import { Upsell } from '@sky-uk/ui-sections';

Example

The Upsell section features an Image and short copy section with optional app buttons.

Select background colour

function Example() {
  const content = {
  appStoreCtas: [
    {
      data: {
        trackDescription: 'apple-app-description',
        trackLabel: 'apple-app-label'
      },
      href: 'https://www.apple.com',
      alt: 'Apple App Store',
      src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt4810f3238a5fbce2/62d95a73ce66ad7665f7e83f/appleAppstore.svg'
    },
    {
      data: {
        trackDescription: 'google-app-description',
        trackLabel: 'google-app-label'
      },
      href: 'https://www.google.com',
      alt: 'Google Play Store',
      src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt787dd902a65a1de2/62d95a7317133b76c5bd2bb0/googlePlaystore.svg'
    }
  ],
  data: {
    testId: 'upsell-fixture-test-id',
    contentId: 'upsell-fixture-content-id'
  },
  header: {
    body: 'Watch sports on a huge range of devices – including smart TV, desktop, console, tablet and mobile on the Sky Go app.',
    headline: 'Watch on the big screen. Or the little one.',
    overline: {
      src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt074a50c83df46738/66ba2226492abc68b5bf9faf/Sky_Sports_logo_2020.svg',
      alt: 'Sky Sports'
    }
  },
  image: {
    alt: 'be awesome',
    src: 'https://placehold.co/600x400'
  },
  }

  return (
    <>
      <Upsell $appearance="default" $theme="channels.cinema" {...content} />
    </>
  );
}

function Example() {
  const content = {
  appStoreCtas: [
    {
      data: {
        trackDescription: 'apple-app-description',
        trackLabel: 'apple-app-label'
      },
      href: 'https://www.apple.com',
      alt: 'Apple App Store',
      src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt4810f3238a5fbce2/62d95a73ce66ad7665f7e83f/appleAppstore.svg'
    },
    {
      data: {
        trackDescription: 'google-app-description',
        trackLabel: 'google-app-label'
      },
      href: 'https://www.google.com',
      alt: 'Google Play Store',
      src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt787dd902a65a1de2/62d95a7317133b76c5bd2bb0/googlePlaystore.svg'
    }
  ],
  data: {
    testId: 'upsell-fixture-test-id',
    contentId: 'upsell-fixture-content-id'
  },
  header: {
    body: 'Watch sports on a huge range of devices – including smart TV, desktop, console, tablet and mobile on the Sky Go app.',
    headline: 'Watch on the big screen. Or the little one.',
    overline: {
      src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt074a50c83df46738/66ba2226492abc68b5bf9faf/Sky_Sports_logo_2020.svg',
      alt: 'Sky Sports'
    }
  },
  image: {
    alt: 'be awesome',
    src: 'https://placehold.co/600x400'
  },
  }

  return (
    <>
      <Upsell $appearance="default" $theme="channels.cinema" {...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.

$animated?: boolean
$appearance?: string (default | light)
$theme?: GradientKey (gradient)
appStoreCtas?: array
- data?: object
- href: string
- alt: string
- src: string
background?: object
- color?: Color (color)
- image?: object
  - src: string
- theme?: GradientKey (gradient)
data?: object
header: object
- body?: string
- headline: string
- headlineLevel?: string (h1 | h2 | h3);
- overline?: string | object
  - alt?: string
  - src: string
image: object
- alt?: string
- src: string