Quote

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.

Example of a left-aligned block quote

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.

block quote breakdown

Only the left-aligned block quote can include these additional elements

Theme

Example of a left-aligned block quote
Example of a left-aligned block quote

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.

Example of a left-aligned block quote
Example of a left-aligned block quote

Layout

The width of a block quote on large screens is determined by alignment and if they’re used with a component. .

Block quote layout

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

Block quote layout

A center-aligned block quote is eight grid columns wide and can’t be used with other components

block quote layout

When used with a Card, a left-aligned block quote is seven grid columns wide (7-1-4 layout)

Block quote 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.

block quote without attribution

Don’t add a thin vertical bar to a left-aligned block quote that’s used by itself.

Bar block quote wrong usage

Don’t place components next to a center-aligned block quote.

Centered block quote next to video

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

block quote on desktop
Centered block quote on desktop
block quote on tablet
block quote on tablet centered

Tablet

block quote on tablet with titles
block quote on tablet with titles
block quote on tablet with titles
block quote on tablet with titles

Mobile

block quote on mobile
block quote on mobile
block quote on mobile
block quote on mobile

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.

Spacing used in block quote component

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.