Blockquote - React

View on Figma View on GitHub

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" />

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

Props

Prop	Type	Default	Description
$appearance	`'light'` \| `'default'` \| `undefined`	undefined	The `$appearance` prop sets tab styles for various backgrounds, including a light version for dark backgrounds.
author	string	undefined	The author for the Blockquote
image	object (Image props)	undefined	The image for the Blockquote
link	object (Link props)	undefined	The link to the source of the review
rating	number	undefined	The rating /5 of the review
source	string	undefined	The source of the Blockquote

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"
/>

<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"}} />

<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}/>

<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" />

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

System Modifiers

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

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