Guides and Sample Code


Apple News Format: Design Tutorial

On This Page

Pull Quote Components

You can use pull quotes to highlight particularly compelling and relevant points. Visually, a pull quote can break up long portions of text, providing a visual relief to the reader.

image: ../Art/pullquote-closeup_2x.png

When a pull quote is accompanied by an attribution line, the pull quote and attribution should use two separate pullquote components. This allows you to use different layout and styling for the quote text and the attribution text.

image: ../Art/pullquote-attribution_2x.png

You’ll place pullquote components in the article’s components array. For a pull quote or attribution component, the value of the role property is "pullquote". The value of the text property is either the pull quote text, including any straight or curly quotation marks you want to appear, or the attribution text, including any introductory em dash. You will likely often want the pull quote text to duplicate some article text.

For information on customizing pull quotes, see Pull Quote in the Apple News Format Reference.

JSON Example: Pull Quote and Attribution

First, break an existing body component into two components. Then, insert two pullquote components (a pull quote and an attribution) between the body components.

Example Code

Ellipses (...) indicate lines of code that have been omitted from this example.

  1. {
  2. ...
  3. "components": [
  4. ...
  5. {
  6. "role": "pullquote",
  8. },
  9. {
  10. "role": "pullquote",
  11. "text": "— ATTRIBUTION"
  12. },
  13. ...
  14. ],
  15. ...
  16. }

Further Exploration

At any time, you can try changing property values in your article.json file, and then use News Preview to see how these changes impact the look of your article.

For example, try changing the text of your article’s pull quote:

  1. In your code, find the text property of the first pullquote component in the components array.

  2. Replace the value of the text property, "“QUIA CONSEQUUNTUR MAGNI DOLORES EOS QUI RATIONE VOLUPTATEM SEQUI NESCIUNT.”", with the text of your choice.

  3. Preview your article.json file in News Preview. See also: Updating Your Article Preview.

    The pull quote now displays your text.