Skip to main navigationSkip to main content
Return to Sky UI homepage

Reasons to Believe - React

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

Example

The ReasonsToBelieve section features a list of predfined RTBs supporting icons or images.

function Example() {
  const content = {
    data: {
      testId: 'testId',
      contentId: 'contentId'
    },
    header: {
      headline: 'This week on Sky Sports',
    },
    body: 'This weekend watch the final of the U.S Open, the third and final cricket Test match between England and Sri Lanka, and have a late night to catch the NFL in action.',
    items: [
      {
        title: 'U.S Open',
        body: 'The final of the U.S Open is here. Who will take the title?',
        icon: {
          color: 'grey50',
          src: tickCircleSolid
        },
        cta: {
          text: 'Watch now',
          href: 'https://www.sky.com',
          data: {
            trackingDescription: 'tracking description',
            trackingLabel: 'tracking label'
          }
        }
      },
      {
        title: 'England vs Sri Lanka',
        body: 'The third and final cricket Test match between England and Sri Lanka is here.',
        image: {
          src: 'https://placehold.co/40x40/webp'
        }
      },
      {
        title: 'NFL',
        body: 'Catch the NFL in action this weekend.',
        icon: {
          src: tickCircleSolid
        },
        cta: {
          text: 'Watch now',
          href: 'https://www.sky.com',
          target: '_blank',
          data: {
            trackingDescription: 'tracking description',
            trackingLabel: 'tracking label'
          }
        }
      },
      {
        title: 'England vs Sri Lanka',
        body: 'The third and final cricket Test match between England and Sri Lanka is here.',
        image: {
          src: 'https://placehold.co/40x40/webp'
        }
      }
    ]
  }

  return (
    <>
      <ReasonsToBelieve {...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 defaults to false
  • $appearance?: string (default | light)
  • background?: object
  • 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
  • items: array
    • body?: string
    • cta?: object
      • text?: string
      • href?: string
      • data?: object
      • onClick?: function
      • target?: string
    • title: string
    • image?: object
      • src: string
      • $size?: string (default | large)
    • icon?: object
      • color?: Color (color)
      • src: string (image | icon)