Blockquote - React

import { Blockquote } from '@sky-uk/ui-core';

The Blockquote component is used for testimonials or product ratings.

<Blockquote quote="This is a quotation, arcu elit habitant natoque fames feugiat inceptos" author="Author name" source="Source name" />

Citation source as a link

Providing a href prop wraps the citation in an inline link.

<Blockquote
  author="Author name"
  image={{
    alt:"Source name",
    src: "https://placehold.co/200x60"
  }}
  link={{
    href: "https://sky.com",
    target: "_blank",
    title: "Visit SOURCE NAME to read more."
  }}
  quote="This is a quotation"
  source="Source name"
/>

Citation source image

Providing an image for the citation source such as a brand logo.

<Blockquote quote="This is a quotation" author="Author name" source="Source name" image={{src: "https://placehold.co/200x60", alt:"Source name"}} />

Rating

You can provide a rating of 1 to 5 stars.

<Blockquote quote="A sophisticated premium TV streaming platform, distinctive design, colour-rich 4K pictures and a contract payment plan." author="Tech Advisor" rating={4} $maxWidth={container(5)} $marginX="auto" $marginBottom={4}/>

Light variant

Use $appearance to alternate between default and light to provide contrast on shaded backgrounds.

<Blockquote $appearance="light" quote="This is a quotation" author="Author name" source="Source name" />

Props

• $appearance: 'light' | 'default' | undefined
• author: string
• image: object
  • Image props
• link: object
  • Link props
• quote: string
• rating: number
• source: string

System Modifiers

This component also supports the props applied using the following system modifiers:

• display
• flex-child
• grid-child
• margin
• width

Translatable Fields

This component supports translation on the fields related to the rating:

• blockquotes.rating - sets the hidden text used on the rating element, default rating.
• blockquotes.stars - sets the hidden text used on the stars of the rating, default stars.

For more on translatable fields, view the useTranslation docs here: useTranslation