Blockquote

Blockquotes are semantic elements used to represent a quote from another source. This source can be on the same page or external.

You can use the cite attribute to specify an external source, which can be used by search engines. To visually show the source, you must add the link in plain text. If the source is on the same page, omit the cite attribute.

A blockquote should not be used to simply indent text.

Code

Blockquote

Use this blockquote within main content areas.

<blockquote class="{text-size} {text-offset}">
    Blockquote text
</blockquote>

Short Quote tag (<q>)

This blockquote will add open and end quotes via CSS.

<q>Short Quote</q>

Classes

{text-size}

Determines the size of the text.

Default

The text size is the same as normal paragraph text.

Example Blockquote
Short quote example (<q>)

Impact (.impact)

The text size is increased to 125% normally. It is increased to 133% at window widths above 1200px. The padding also increases to compensate. Can be combined with .offset.

Example 'impact' blockquote
Short Quote example (<q>)

{text-offset}

Determines the left offset of the blockquote.

Default

The blockquote has a 100% width.

Example 'impact' blockquote
Short Quote example (<q>)

Offset (.offset)

The width of the blockquote is reduced to 40%. It changes to float left and has negative margin. Can be combined with .impact. Similar to impact, it will also increase the text size.

If the offset blockquote is placed within a parent element with .sidebar-left (Read: Region), the offset will always have a left margin of 0 (as opposed to a 0.2em left margin at larger window widths).

The font size and margins will progressively increase at the 1200px and 1440px width breakpoints.

Here is an offset blockquote
Short quote example (<q>)

Here is a lot of random text to highlight how a blockquote shifts when given the .offset class. Notice how it floats alongside the text.

It should be positioned before the paragraph text in question.