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.
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
A red quote icon is always placed above the quote text in both themes.
A block quote always has attribution text underneath that gives credit to whoever the quote is from.
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.
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)
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.
A block quote can be used on large and small screens, but content will get longer as space reduces.
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.
A block quote should be text only and shouldn’t include any links that might distract a user from reading.
A block quote uses PatternFly 4 spacers to define the spacing values between elements.
For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.