Hero - React

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

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)
  • $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

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

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)
• 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
• 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

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)
• $split?: string (left | right);
• background?: object
  • $theme?: Gradient (gradient)
  • $color?: Color (color)
  • $image?: Image (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

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)
• $scrimColor?: Color (color)
• 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
• 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

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)
• $scrimColor?: Color (color)
• background?: object
  • $theme?: Gradient (gradient)
  • $color?: Color (color)
  • $image?: Image (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