Blockquote

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Sizes
  3. Theme
  4. Configuration
  5. Space
  6. Interaction states
  1. Style
  2. Sizes
  3. Theme
  4. Configuration
  5. Space
  6. Interaction states

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 30 (1.5)
Large 28px, 1.75rem
Large 36.4 (1.3)
Default and Large 14px, 0.875rem
Default and Large 21 (1.5)

Theme

A blockquote is available on both light and dark backgrounds, and uses [themable tokens][/theming/color-palettes] to respond to it's color context.

Element Current value
Color - quote icon --rh-color-icon-primary
Color - quotation text --rh-color-text-primary
Color - citation text --rh-color-interactive-secondary-default

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
Emphasis level Token
Primary --rh-color-accent-brand
Secondary --rh-color-surface-darkest

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
Title text --rh-color-accent-brand
Heading text --rh-color-text-primary

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 Token or value
Font family - all text --rh-font-family-body-text
Font weight - name --rh-font-weight-body-text-medium
Font weight - job title and company --rh-font-weight-body-text-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

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.

Edit this page on GitHub