Quote
Overview
A Quote consists of a quote icon, larger styled text, and attribution. It can also feature additional elements or components above or to the right.
Sample component
Component status
Style
A default block quote consists of three required elements, a quote icon, text, and attribution. It can be left- or center-aligned on large and small screens. A left-aligned block quote can also feature additional elements, like large text styles and components on top or to the right whereas a center-aligned block quote can’t include anything else.
Only the left-aligned block quote can include these additional elements
Theme
Quote icon
A red quote icon is always placed above the quote text in both themes.
Attribution
A block quote always has attribution text underneath that gives credit to whoever the quote is from.
Additional elements
A left-aligned block quote can feature additional elements on top, like large text styles or a logo. If these optional elements are used, a thin vertical bar is added to the left of a block quote to maintain focus with readers. These additional elements can be used without including a component to the right.
Usage
Layout
The width of a block quote on large screens is determined by alignment and if they’re used with a component. .
When used on its own or with large text styles or a logo on top, a left-aligned block quote is seven grid columns wide
A center-aligned block quote is eight grid columns wide and can’t be used with other components
When used with a Card, a left-aligned block quote is seven grid columns wide (7-1-4 layout)
When used with a Video thumbnail, a left-aligned block quote is five grid columns (5-1-6 layout)
Best practices
Don’t omit attribution from a block quote.
Don’t add a thin vertical bar to a left-aligned block quote that’s used by itself.
Don’t place components next to a center-aligned block quote.
Responsive design
A block quote can be used on large and small screens, but content will get longer as space reduces.
Breakpoints
When breakpoints get smaller, a left-aligned block quote will stay left-aligned, same with a center-aligned block quote. If a left-aligned Block quote is used with components, they drop underneath the quote and all elements are then organized in one column.
Desktop
Tablet
Mobile
Interaction states
A block quote should be text only and shouldn’t include any links that might distract a user from reading.
Spacing
A block quote uses PatternFly 4 spacers to define the spacing values between elements.
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other components in your designs, visit the Components section.