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.
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.
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
...) indicate lines of code that have been omitted from this example.
"text": "“QUIA CONSEQUUNTUR MAGNI DOLORES EOS QUI RATIONE VOLUPTATEM SEQUI NESCIUNT.”"
"text": "— ATTRIBUTION"
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:
In your code, find the
textproperty of the first
pullquotecomponent in the
Replace the value of the
"“QUIA CONSEQUUNTUR MAGNI DOLORES EOS QUI RATIONE VOLUPTATEM SEQUI NESCIUNT.”", with the text of your choice.
article.jsonfile in News Preview. See also: Updating Your Article Preview.
The pull quote now displays your text.