Blockquote

Overview Style Guidelines Code Accessibility

Style

A blockquote is a combination of elements used to give visual prominence to a quotation. By default, a blockquote includes a quote icon, quotation text, and citation text at a minimum. A blockquote may also include the following optional elements:

  • Emphasis border
  • Logo
  • Title and heading text
  • Interactive elements or layouts like a video or card
Anatomy image of a blockquote with numbered annotations
  1. Quote icon
  2. Quotation text
  3. Citation text
  4. Logo or text placeholder
  5. Emphasis border

Sizes

Image of two blockquotes, default size on the left and large size on the right

Theme

A blockquote is available in both light and dark themes.

Light theme

Image of a light theme blockquote, red quote icon, black quotation text, and dark gray citation text

Dark theme

Image of a dark theme blockquote, red quote icon, white quotation text, and light gray citation text

Emphasis border

Image of two blockquotes, a red emphasis border on the left and a black emphasis border on the right
Image of two blockquotes, a red emphasis border on the left and a black emphasis border on the right

Title and heading text

Image of two blockquotes, both with red title text and black header text
Image of two blockquotes, both with red title text and white header text

Configuration

The base elements in both sizes are stacked and left aligned by default, but they can be vertically centered if necessary.

Image of four blockquotes, two are left aligned and two are vertically centered, the quote icon is 20px tall

Order

A blockquote was designed to be read from top to bottom. If certain optional elements are included, the order will change.

Image of a blockquote with numbers 1 - 4 on the right side going from top to bottom
  1. Logo or text (always ordered first if included)
  2. Quotate icon (always included and ordered first if there is no logo or text)
  3. Quotation text (always ordered after the quote icon)
  4. Citation text (always ordered last)

Citation text

Citation text has specific styles applied to it.

Image of three citation text examples

Space

Space values are the same in both sizes and on all breakpoints.

Image of four blockquotes with spacing values in between
Example Token Description
8 --rh-space-md 8px spacer
16 --rh-space-lg 16px spacer
32 --rh-space-2xl 32px spacer

Interaction states

A blockquote includes text only and is not interactive unless interactive elements are added like a video or other elements within a card. If interactive elements are added, go to their element or pattern pages to view the interaction states.

© 2021-2024 Red Hat, Inc. Deploys by Netlify
Scroll back to the top