Blockquote
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

- Quote icon
- Quotation text
- Citation text
- Logo or text placeholder
- Emphasis border
Sizes

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

Dark theme

Emphasis border


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

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

- Logo or text (always ordered first if included)
- Quotate icon (always included and ordered first if there is no logo or text)
- Quotation text (always ordered after the quote icon)
- Citation text (always ordered last)
Citation text
Citation text has specific styles applied to it.

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.

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.