---
title: "Reasons to Believe — React"
canonical: https://sky-ui.cf.sky.com/sections/reasons-to-believe/react
apiPackages: [{"name":"@sky-uk/ui-sections","representedVersion":"1.2.4"}]
---

# Reasons to Believe — React

Used to show 2-4 benefits / key features with small amount of copy.

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

### Example

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

```tsx
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`
  - $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`
- 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](/foundations/colours/))
    - src: `string` (`image` | `icon`)