Pullquote

Pullquotes are used in articles and immersive stories to bring focus to a key quote from the story. They provide an image, often useful for a photo of the person the quote is attributed to. They break up the flow of text to make it more engaging.

Examples and Code

Select exampleDefault

Open Full Example

<div class="pullquotes">
  <div class="pullquotes__wrapper pullquotes--default">
    <div class="pullquotes__col1"><img src="images/test" alt="Test Image" /></div>
    <div class="pullquotes__col2">
      <img src="/test-image-landscape.jpg" alt="Test Image" />
      <div class="pullquotes__quote">
        <q>This is sample
          pull-quote text
        </q>
      </div>
      <div class="pullquotes__name">Author Name</div>
    </div>
  </div>
</div>

Guidance

Usage Guidance

• Use to highlight story quotes: Pullquotes work well in stories to highlight quotes that illustrate the key points of the story.
• Don’t use for non-storytelling purposes: Pullquotes have a focused purpose in storytelling, and they are not intended outside this purpose.

Elements

Element	Description	Usage	Required	Multiple
Column 1	The left column	Used for an optional photo	Yes	No
Column 2	The right column	Used for the quote	Yes	No
Quote	The quote		Yes	No
Name	Name for attribution		No	No

Styles

Classname	Effect	Reason to Use
pullquotes--background	Displays a background image for the pullquote	Use to make the design stand out more
pullquotes--image__left	Place the image left of the quote	Use to adjust the design layout
pullquotes--image__right	Place the image right of the quote	Use to adjust the design layout
pullquotes--border__left	Adds a border on the left of the quote block	Use to adjust the design layout
pullquotes--border__right	Adds a border on the right of the quote block	Use to adjust the design layout