---
title: "Blockquote — React"
canonical: https://sky-ui.cf.sky.com/components/blockquote/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Blockquote — React

Quotation offset from body text.

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

---

The Blockquote component is used for testimonials or product ratings.

```tsx
<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](/components/image/)) | undefined | The image for the Blockquote |
| link | object ([Link props](/components/text-link/)) | 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.

```tsx
<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.

```tsx
<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.

```tsx
<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.

```tsx
<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:

- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [margin](/core/system/margin/)
- [width](/core/system/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](/core/hooks/use-translation/)