Pull quote

Probably considered a specific variant of the blockquote.

Anatomy

Class names:

  • nih-pull-quote
  • nih-pull-quote__body?
  • nih-pull-quote__caption?

Quoted text

The quoted text will be rich text, and should allow for inline formatting such as subscript and emphasis.

Attribution

Attribution is optional, and can be implemented as any attribution component. For example a reference to a Twitter account, which could be a specific Twitter avatar component.

Accessibility

Considerations:

  • Are quote marks generated by q:lang(en)::before { content: '"' } accessible?
  • Visually pull quotes are usually styled in a distinctive way, but for screen reader users the pull quote might not be apparent.
  • Is the reading order logical for screen reader users?
  • The pull quote draws attention away from the main content.

Technology

Probably best to use the <blockquote> HTML element as a container, and the <cite> HTML element for the optional attribution.

Content design

Internationalization

Quote marks vary per language and script: Unicode Quotation Marks. Customisation of the quotation marks should be supported.

Experiment

Custom element:

Hello world

Progressive enhancement of blockquote element:

Hello world