Blockquotes are a way to highlight a block of content from an external source or to callout a section from the current context (like a pull quote).

Examples

Usage

Rules

  • Use blockquotes sparingly
  • Use right justified blockquotes even less (right justified text can be harder to read)
  • Blockquotes should make sense within the rest of the content flow
  • Keep the DOM reading order in mind when visually positioning a blockquote so that context is maintained in both cases

Constraints

  • The blockquote uses a default type size until the medium breakpoint where it increases—maintaining relative scale with surrounding content in both instances

Principle

  • Use a blockquote to break up a content section by means of emphasizing a key thought, concept or reference

Accessibility

  • Use semantic flow elements within a blockquote, typically a <p> element
  • If necessary, use citations (<cite>) to provide a reference or link to the source when the content is not pulled from the existing flow

Class Names

blockquote
Required

Use on a <blockquote> element
blockquote-reverse
Modifier

Use with .blockquote to right justify the blockquote content
blockquote-footer
Modifier

Use on a <footer> element within the blockquote to contain a reference or citation (<cite>)
  • Last updated April 6, 2018
  • Authorable - Yes
  • Core - Blockquotes