Blockquote

Blockquote sets off words quoted from another person or source with a bar on its starting edge.

Blockquote renders a blockquote element with a coloured bar on its starting edge (the left in left-to-right text, the right in right-to-left text) and text set like Text. Use it for words that come from someone else: a customer, a review or a document. A note, tip or warning from your own product is a Notice.

Playground

The best interface is the one you stop noticing after the first week.

Maya Lin, product lead

Usage

import { Blockquote, Flex, Text } from '@kushagradhawan/kookie-ui';
 
export function CustomerQuote() {
  return (
    <Flex direction="column" gap="2">
      <Blockquote size="3">
        We moved our whole support team over in a week, and nobody asked for the old tool back.
      </Blockquote>
      <Text as="p" size="2" emphasis="medium">
        Priya Raman, Head of Support at Northwind
      </Text>
    </Flex>
  );
}

Best practices

Use it only for quoted words. A screen reader announces a blockquote as a quotation. Indenting your own copy with it tells people someone else said it.

Put the source outside the quote. Blockquote has no attribution part. Add a Text with emphasis="medium" after it for the name, and set cite to the source's address when there is one.

Keep the quote short. One to three sentences reads as a quote. A longer passage reads as a block of body copy with a bar beside it.

Don't use it for callouts. For a tip, a warning or a status message, use a Notice. It has the role and the colours for that job.

Size and colour

size picks a step from 1 to 9, the same scale as Text: 12, 14, 16, 18, 20, 24, 32, 44 and 64 pixels at the default scale. With no size, the quote inherits the font size around it. Use size 3 for a quote in body copy and size 5 or 6 for a pull quote on a marketing page.

The bar takes the accent colour. Set color to change the bar and the text together. Set emphasis to fade the text: with no color, it steps down the neutral ink. The bar keeps its colour.

Examples

Quote in an article

Inside running copy, match the paragraph's size, so the quote reads as part of the text.

<Flex direction="column" gap="3">
  <Text as="p" size="3">
    The review found one main cause of the outage.
  </Text>
  <Blockquote size="3" cite="https://example.com/review">
    The retry limit was set per request, not per user.
  </Blockquote>
</Flex>

Pull quote

A larger size and a lighter weight lift one line out of a long page.

<Blockquote
  size="6"
  weight="regular"
  wrap="balance"
>
  Ship the smallest change that tells you something.
</Blockquote>

Quote in a list of reviews

Use emphasis="medium" when the quote sits next to stronger content, such as a product name.

<Blockquote size="2" emphasis="medium">
  Setup took ten minutes.
</Blockquote>

Props

Prop	Type	Default	Description
`size`	`'1'` to `'9'`, responsive		The type step. Inherits when unset
`weight`	`'regular' \| 'medium' \| 'semibold'`, responsive		The font weight. Inherits when unset
`color`	`AccentColor`		The colour of the text and the bar. When unset, the text inherits and the bar takes the theme accent
`emphasis`	`'loud' \| 'medium' \| 'quiet'`		How strongly the text reads
`truncate`	`boolean`		Keeps one line and ends it with an ellipsis
`wrap`	`'wrap' \| 'nowrap' \| 'pretty' \| 'balance'`, responsive		How lines break
`asChild`	`boolean`	`false`	Renders the child element with the quote's styles

Blockquote also accepts every attribute of the HTML blockquote element, including cite.

Accessibility

Role: The blockquote element tells a screen reader that the text is a quotation. Some screen readers announce where the quote starts and ends.
Source: cite holds an address but isn't shown or read aloud by most screen readers. Put the speaker's name in visible text next to the quote.
Colour: The bar is decoration. The quote doesn't depend on its colour to be understood.