Blockquote
On this page
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
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.
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.
Example
Token
Description
md
8px spacer
lg
16px spacer
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.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.