Pull Quotes and Block Quotes

Pull Quotes

Pull quotes are short excerpts from the presented text.

Usage, Best Practice, and Accessibility

Regular Pull Quote Example

Simple Pull Quote Example 


Block Quote

Block quotes are typically large quotations. They are set off from the main text as a distinct paragraph or block.

Example

"This is an example of a block quote. People come to your website with a specific task in mind. When developing your site’s content, keep your users’ tasks in mind and write to ensure you are helping them accomplish those tasks. If your website doesn’t help them complete that task, they’ll leave."

Anonymous usability expert


Usage

Pull Quotes

Click the P icon in the WYSIWYG toolbar . Pullquote fields will be added.

pull quote icon in the toolbar

Simple Pull Quote

Follow these steps below to add a simple pull quote to your content.

  • Click the SP icon in the WYSIWYG toolbar.
    Simple pull quote icon
  • In the popup window, select the position of the text in the “Text align” dropdown and click “OK”.
    Simple align popup window
  • Simple pull quote fields will be added.

Block Quotes

Enter the block quote text. Highlight it and click the quote icon to create a block quote.

Best Practice

Pull Quotes

  • If a pull quote is removed from the page, then the content still remains the same.
  • Pull quotes are used to pull a text passage out of the reader’s flow.
  • A pull quote may be placed in a prominent position in the body copy, but it should come before its appearance in body text.
  • Pull quotes shouldn’t be used too often. The page content shouldn't exceed more than one or two quotes; otherwise, they lose their appeal and the content becomes difficult to scan.
  • The quote shouldn't be too long. Again, it can lose its appeal and the content can become difficult to scan.
  • The attribution style within the body copy and the pull quote should be consistent.

Block Quote

  • If a block quote is removed from the article, it means the article is missing some important information.
  • Block quotes refer to some external citation that isn’t already mentioned in the article.
  • Block quotations are usually placed within the reader’s flow.
  • They should be used sparingly, because they are not written in your own voice and could take over the voice of the article.
  • They are not usually enclosed in quotation marks.
  • Use this style when the quotation is made up of more than four lines or more than 40 words.
Accessibility

Pull quotes repeat content within a page. The aria role < span aria-hidden="true" > is used to tell the screen reader to skip over the content so it's not read twice.