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

# Hero — React

```js
import { HeroText } from '@sky-uk/ui-sections';
import { HeroStandard } from '@sky-uk/ui-sections';
import { HeroSplit } from '@sky-uk/ui-sections';
import { HeroImmersive } from '@sky-uk/ui-sections';
import { HeroCarousel } from '@sky-uk/ui-sections';
```

The `Hero` section is available in multiple layouts. There are:

- `HeroText`
- `HeroStandard`
- `HeroSplit`
- `HeroImmersive`
- `HeroCarousel`

---

## HeroText

The `HeroText` is the Hero in it's simplest form. It is a full-width container with text.

### Example

---

```full-screen-react-live
function Example() {
  const content = {
    data: {
      testId: 'hero-fixture-test-id',
      contentId: 'hero-fixture-content-id'
    },
    header: {
      overline: {
        src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt074a50c83df46738/66ba2226492abc68b5bf9faf/Sky_Sports_logo_2020.svg',
        alt: 'Sky Sports'
      },
      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.',
      primaryCta: {
        text: 'Watch Now',
        href: 'https://www.sky.com/watch',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      },
      secondaryCta: {
        text: 'Learn More',
        href: 'https://www.sky.com/learn-more',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      },
      textCta: {
        text: 'See All Sports',
        href: 'https://www.sky.com/sports',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      }
    }
  }

  return (
    <>
      <HeroText {...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`

---

## HeroStandard

The `HeroStandard` is a full-width container with a background image and text overlay.
The text block can be aligned using the `$alignment` prop.
An optional `Scrim` can be added to darken the background image and make overlaying text accessible.

### Example

---

```full-screen-react-live
function Example() {
  const content = {
    data: {
      testId: 'hero-fixture-test-id',
      contentId: 'hero-fixture-content-id'
    },
    header: {
      overline: {
        src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt074a50c83df46738/66ba2226492abc68b5bf9faf/Sky_Sports_logo_2020.svg',
        alt: 'Sky Sports'
      },
      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.',
      primaryCta: {
        text: 'Watch Now',
        href: 'https://www.sky.com/watch',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      },
      secondaryCta: {
        text: 'Learn More',
        href: 'https://www.sky.com/learn-more',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      },
      textCta: {
        text: 'See All Sports',
        href: 'https://www.sky.com/sports',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      }
    },
    image: {
      src: { xs: 'https://placehold.co/900x1600', lg: 'https://placehold.co/4200x600' },
      alt: ''
    }
  }

  return (
    <>
      <HeroStandard {...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.

- $alignment?: `string` (`left` | `center`)
- $animated?: `boolean` defaults to `false`
- $appearance?: `string` (`default` | `light`)
- $scrimColor?: `Color` ([color](/foundations/colours/))
- 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`
- image:
  - src: `string` | `object` (responsive image)
  - alt?: `string`

---

## HeroSplit

The `HeroSplit` is a full-width container featuring an image and header with a 50/50 split layout. It can be split with the text either `left` or `right` using the `$split` prop. The text block can be aligned using the `$alignment` prop within the header object.

### Example

---

```full-screen-react-live
function Example() {
  const content = {
    data: {
      testId: 'hero-fixture-test-id',
      contentId: 'hero-fixture-content-id'
    },
    header: {
      $alignment: 'left',
      overline: {
        src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt074a50c83df46738/66ba2226492abc68b5bf9faf/Sky_Sports_logo_2020.svg',
        alt: 'Sky Sports'
      },
      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.',
      primaryCta: {
        text: 'Watch Now',
        href: 'https://www.sky.com/watch',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      },
      secondaryCta: {
        text: 'Learn More',
        href: 'https://www.sky.com/learn-more',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      },
      textCta: {
        text: 'See All Sports',
        href: 'https://www.sky.com/sports',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      }
    },
    image: {
      src: 'https://placehold.co/800x600',
      alt: ''
    }
  }

  return (
    <>
      <HeroSplit $split="left" $appearance="light" background={{
        $theme: "channels.sports"
      }} {...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`)
- $theme?: `Gradient` ([gradient](/foundations/gradients/))
- $split?: `string` (`left` | `right`);
- background?: `object`
  - $theme?: `Gradient` ([gradient](/foundations/gradients/))
  - $color?: `Color` ([color](/foundations/colours/))
  - $image?: `Image` ([image](/components/image/))
- data?: `object`
- header
  - $alignment?: `string` (`left` | `center`)
  - 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:
  - src: `string` | `object` (responsive image)
  - alt?: `string`

---

## HeroImmersive

The `HeroImmersive` is a full-width and viewport height container with a background image and text overlay.
An optional `Scrim` can be added to darken the background image and make overlaying text accessible.

### Example

---

```full-screen-react-live
function Example() {
  const content = {
    data: {
      testId: 'hero-fixture-test-id',
      contentId: 'hero-fixture-content-id'
    },
    header: {
      overline: {
        src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt074a50c83df46738/66ba2226492abc68b5bf9faf/Sky_Sports_logo_2020.svg',
        alt: 'Sky Sports'
      },
      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.',
      primaryCta: {
        text: 'Watch Now',
        href: 'https://www.sky.com/watch',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      },
      secondaryCta: {
        text: 'Learn More',
        href: 'https://www.sky.com/learn-more',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      },
      textCta: {
        text: 'See All Sports',
        href: 'https://www.sky.com/sports',
        data: {
          testId: 'testId',
          trackingLabel: 'trackingLabel'
        }
      }
    },
    image: {
      src: { xs: 'https://placehold.co/900x1600', lg: 'https://placehold.co/4200x600' },
      alt: 'Sky Sports'
    }
  }

  return (
    <>
      <HeroImmersive {...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`)
- $theme?: `Gradient` ([gradient](/foundations/gradients/))
- $scrimColor?: `Color` ([color](/foundations/colours/))
- 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`
- image:
  - src: `string` | `object` (responsive image)
  - alt?: `string`

---

## HeroCarousel

The `HeroCarousel` is a full width carousel. A visually hidden `header` must be provided for accessibility.
An optional `Scrim` can be added to darken the background image and make overlaying text accessible.

### Example

---

```full-screen-react-live
function Example() {
  const content = {
    data: {
      testId: 'hero-immersive-fixture-test-id',
      contentId: 'hero-immersive-fixture-content-id'
    },
    header: {
      headline: 'This week on Sky Sports'
    },
    slides: Array.from({ length: 5 }).map((_, index) => ({
      description: `This is a description of the slide content ${index + 1}`,
      header: {
        overline: {
          src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt074a50c83df46738/66ba2226492abc68b5bf9faf/Sky_Sports_logo_2020.svg',
          alt: 'Sky Sports'
        },
        headline: `This week on Sky Sports ${index + 1}`,
        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.',
        primaryCta: {
          text: 'Watch Now',
          href: 'https://www.sky.com/watch'
        },
        secondaryCta: {
          text: 'Learn More',
          href: 'https://www.sky.com/learn-more'
        },
        textCta: {
          text: 'See All Sports',
          href: 'https://www.sky.com/sports'
        }
      },
      image: {
        src: { xs: 'https://placehold.co/900x1600', lg: 'https://placehold.co/2100x900' },
        alt: 'Sky Sports'
      }
    }))
  }

  return (
    <>
      <HeroCarousel {...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`)
- $theme?: `Gradient` ([gradient](/foundations/gradients/))
- $scrimColor?: `Color` ([color](/foundations/colours/))
- background?: `object`
  - $theme?: `Gradient` ([gradient](/foundations/gradients/))
  - $color?: `Color` ([color](/foundations/colours/))
  - $image?: `Image` ([image](/components/image/))
- data?: `object`
- header
  - headline: `string`
- slides: `array` of objects
  - description?: `string` (visually hidden description for screen readers)
  - header: `object`
    - 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:
    - src: `string` | `object` (responsive image)
    - alt?: `string`

---