Blockquote

A default blockquote 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 blockquote can also feature additional elements, like large text styles and components on top or to the right whereas a center-aligned blockquote can't include anything else.

Only the left-aligned blockquote can include these additional elements

Theme

Quote icon

A red quote icon is always placed above the blockquote text in both themes.

Attribution

A blockquote always has attribution text underneath that gives credit to whoever the quote is from.

Additional elements

A left-aligned blockquote 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 blockquote to maintain focus with readers. These additional elements can be used without including a component to the right.

---

Responsive design

A blockquote can be used on large and small screens, but content will get longer as space reduces.

Breakpoints

When breakpoints get smaller, a left-aligned blockquote will stay left-aligned, same with a center-aligned blockquote. If a left-aligned blockquote is used with components, they drop underneath the quote and all elements are then organized in one column.

Desktop

Tablet

Mobile