Pull quote
/PULL KWOHT/ · noun · CONTENT pattern · #140
A short, striking line lifted from an article and repeated in large type between the paragraphs or in the margin, often with big quotation marks or a rule above and below, to catch the eye of someone skimming and pull them into the story. Magazines, newspapers and long blog posts use it. Unlike a block quote, which quotes another source, a pull quote repeats words already in the text.
Also called: pullquote, pull-out quote, lift-out quote, callout quote.
You might call it
- “the big quote in the middle of an article”
- “the quote in large letters between paragraphs”
- “the highlighted quote in a magazine”
- “the quote that repeats a line from the story”
…its name is Pull quote.
Common questions
What is a pull quote?
A sentence or phrase taken from an article and repeated in larger type on the same page, between paragraphs or in a side column, usually with quotation marks or rules to set it apart. Magazines use it to catch the eye of someone flipping through; websites and long blog posts use it to break up long text and show what the piece is about.
Pull quote vs blockquote: what is the difference?
A block quote quotes someone else: a long quotation from another source, set off from the text and shown only once. A pull quote quotes the article itself: a line that already appears in the text, repeated in big type as a design element. In HTML a block quote is a <blockquote>; a pull quote is better marked up as an <aside> hidden from screen readers, since its words are already in the article.
What are pull quotes used for?
To catch the eye of people skimming and give them a reason to read: a pull quote shows the most striking line before they reach it. It also breaks up long columns of text, adds a point of interest where there are no pictures, and can highlight what someone in the story said. Use one or two per article, and pick lines that make sense on their own.
In code
| Web (HTML) | <aside aria-hidden="true"> <blockquote> blockquote is for quoting another source; a pull quote repeats the article, so hide the copy from screen readers |
|---|---|
| Web (CSS) | font-size border-block float: right |
| WordPress | core/pullquote The Pullquote block, which screen readers still read twice; Quote is for block quotes |
| Microsoft Word | Insert › Text Box has ready-made quote boxes (Windows) |
| Adobe InDesign | A separate text frame with text wrap around it |
Prompt for your AI coding tool
Add a pull quote to this article: pick one short, striking sentence from the text (under about 25 words) and repeat it between two paragraphs about a third of the way down, set in larger, bolder or italic type with a coloured rule or large quotation marks and generous space around it. Mark it up as an <aside> with aria-hidden="true" so screen readers do not read the sentence twice, never place it right beside the sentence it repeats, and let it span the full width on phones.
More UI words to use when vibe coding →
Related patterns
All the parts of a website, named →