Red Hat digital design system

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.