Pullquote Block

The Pullquote block is used to highlight quoted content with stronger visual emphasis. Like the Quote block, it uses semantic quotation markup, but it’s designed to stand out and draw attention within a page layout.

Start here: watch the walkthrough (7 minutes)

Why use the Pullquote block

Use the Pullquote block when you want to:

  • Draw visual attention to a quotation
  • Emphasize a key message or idea within the content
  • Add editorial or design-driven emphasis to a page
  • Highlight a quote without breaking semantic structure

Pullquotes are most effective when used sparingly. Because they stand out visually, they work best as intentional highlights rather than frequent elements.

How to use the block

Start by adding the Pullquote block to the page. Learn how to add blocks.

Once the block is added, editors typically:

  • Enter the quoted text into the quote field
  • (Optional) Add a citation when attribution is helpful
  • Adjust alignment or width using the block toolbar
  • Apply styles for spacing, color, or borders to match the layout

The Pullquote block is designed to balance strong visual emphasis with clear semantic meaning.

Pullquote block vs. Quote block

Two different blocks are available for quoted content: Quote and Pullquote.

  • Use the Quote block when a quote should quietly support the surrounding content with minimal visual styling.
  • Use the Pullquote block when the quote itself should stand out and draw attention.

Both blocks represent real quotations. The difference is emphasis — not meaning.

Block toolbar

The block toolbar appears above the Pullquote block when it’s selected.

Available options

  • Text alignment: Align the quote left, center, or right
  • Block width: Control how wide the Pullquote appears within the layout
  • Bold / Italic: Apply emphasis within the quote text
  • Link: Add links within the quote text when appropriate

Block settings

The Pullquote block does not include additional settings in the block settings sidebar.

The overall structure and behavior of the block are intentionally simple and controlled by the design system.

Block styles

In Block Settings, the Styles tab includes additional controls to adjust the appearance of the Pullquote block.

Color

Choose a text color from the available options to ensure readability and sufficient contrast.

Tip: Even visually emphasized quotes should remain easy to read and accessible.

Dimensions

Use Dimensions to control spacing:

  • Padding: Adds space inside the Pullquote
  • Margin: Controls space above and below the block

Spacing can help a Pullquote feel intentional, but too much can disrupt content flow.

Border

Border options allow you to visually frame the Pullquote:

  • Border color and width are controlled within the same setting
  • Border radius adjusts the corner rounding

Use borders consistently and in line with the design system.

Accessibility and content guidance

The Pullquote block uses semantic blockquote markup, ensuring quoted content is correctly identified by assistive technologies.

Important considerations:

  • Screen readers recognize Pullquotes as quoted content
  • Search engines treat Pullquotes as quotations, not primary page text
  • Visual emphasis does not replace semantic meaning — both work together

Tips for editors

Use Pullquotes intentionally

Tip: Pullquotes are meant to stand out. Use them to highlight a key idea, not as a replacement for standard quotes throughout a page.

Keep Pullquotes short

Tip: Short, impactful quotes work best. Long Pullquotes can overwhelm the layout and distract from surrounding content.

Skip the citation if it’s not needed

Tip: The citation field is optional. Only include it when attribution adds clarity or value.