Testimonials - React

View on Figma View on GitHub

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

The Testimonials section is used to display product awards, reviews, or recognitions in a prominent and consistent format.

function Example() {
  const content = {
    data: {
      testId: 'testimonials-test-id',
      contentId: 'testimonials-content-id'
    },
    items: [
      {
        author: 'John Smith',
        image: {
          alt: 'A cited creative work logo',
          src: 'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/bltf033a075fa703a7b/logoPlaceholder.png'
        },
        quote: 'Fast, reliable, and friendly support every time.',
        rating: 4,
        source: 'Sky Mobile'
      },
      {
        author: 'Jane Doe',
        image: {
          alt: 'A cited creative work logo',
          src: 'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/bltf033a075fa703a7b/logoPlaceholder.png'
        },
        link: {
          href: 'https://sky.com',
          target: '_blank',
          title: 'Visit SOURCE NAME to read more.'
        },
        quote: "Sky's service was outstanding and exceeded my expectations.",
        rating: 5,
        source: 'Sky'
      },
      {
        quote: 'Fast, reliable, and friendly support every time.',
        author: 'Joe Smith',
        rating: 2,
        source: 'Sky Mobile'
      }
    ],
    header: {
      headline: 'Testimonials'
    }
  }

  return (
    <>
      <Testimonials data={content.data} header={content.header} items={content.items} />
    </>
  );
}

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)
background?: object
- $theme?: Gradient (gradient)
- $color?: Color (color)
- $image?: Image (image)
data?
- testId?: string
- contentId?: string
header?
- $appearance: boolean
- 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
- BlockquoteProps:
  - $appearance?: string
  - author?: string
  - image?: object
  - link?: object
  - quote: string
  - rating?: number
  - source?: string