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
Size Element Current value
Default Text size - quotation 20px, 1.25rem
Default Line height - quotation 30 (1.5)
Large Text size - quotation 28px, 1.75rem
Large Line height - quotation 36.4 (1.3)
Default and Large Text size - citation 14px, 0.875rem
Default and Large Line height - citation 21 (1.5)

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
Property Current value
Color - quote icon #EE0000
Color - quotation text #151515
Color - citation text #4D4D4D

Dark theme

Image of a dark theme blockquote, red quote icon, white quotation text, and light gray citation text
Property Current value
Color - quote icon #FF542E
Color - quotation text #FFFFFF
Color - citation text #C7C7C7

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
Emphasis level Light theme Dark theme
Primary #EE0000 #FF542E
Secondary #151515 #FFFFFF

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
Element Light theme Dark theme
Title text #EE0000 #FF542E
Heading text #151515 #FFFFFF

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
Property Current value
Font family - all text Red Hat Text
Font weight - name Medium
Font weight - job title and company Regular
Font style - company Italic

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