Styling & Showcasing Quotes
Use the quote and pullquote blocks to offset longer passages or highlight short excerpts that draw readers in.
The WashU Web Theme provides two different blocks for highlighting quotations and passages: quote and pullquote. These blocks can be used rather interchangeably.
The pullquote text aligns left or right against a vertical accent bar. Choose from five accent bar colors.
Citation is optional
The quote block is centered by default. It’s topped with large quotation marks for emphasis.
Citation is optional
Readability tips
Whichever block you choose, a few length and alignment considerations will improve readability for your site’s visitors:
- Longer quotations (four or more lines): Left-align text
- Passages that are part of the flow of surrounding text: Left-align text
- Excerpts or quotes used as visual elements, duplicating text from the body of the page: Center text, or align the entire block left or right (block floats to left or right, and paragraphs wrap around it; see example below)
How to add quotations in blocks
New to building pages in blocks? Get to know the block editor »
Using the quote block
Use the quote block to set apart quotations, testimonials and other sections of text within a page.
Quote block alignment controls the text alignment. This is different from the pullquote block, for which alignment moves the entire block to the left or right side of the page.
Standalone quote in a billboard
We added the quote block below to a billboard to emphasize a glowing testimonial.
“Washington University was like striking gold. I could create the experience I wanted.”
Annicka Webster, Full-Time MBA and MSW
Longer quotation, aligned left
The mission statement below is left-aligned to make the longer passage easier to read.
Washington University School of Medicine will lead in advancing human health through the best clinical care, innovative research and the education of tomorrow’s leaders in biomedicine in a culture that supports diversity, inclusion, critical thinking and creativity.
Highlighting an engaging passage
In the passage below — an excerpt from Chancellor Andrew Martin’s blog post “Increasing access to a WashU education” — an excerpt from student Sofia Robayo-Camargo is repeated in a block quote to draw readers into the text.
That’s where WashU’s College Prep program stepped in.
College Prep Program, led by Associate Vice Chancellor for Community Engagement and St. Louis Readiness Initiatives Leah Merrifield, with giving her some of the tools and confidence she needed to succeed and apply for top-tier universities. When she decided to apply for school, Washington University was at the top of her list.
I want to give others who look like me and come from a similar background a chance to see themselves in the medical profession.
First year student Sofia Robayo-Camargo
“I didn’t think I was going to get in,” she said. When asked why, she elaborated. “Because of all the barriers, many immigrants lack confidence in themselves. I have that same tendency at times.”
But Sofia did get into WashU. Flash forward six months, and we are now extremely proud and honored to claim Sofia as one of our first year students. Though she’s still settling in, she’s excited about majoring in biology and pre-med.
“I want to give others who look like me and come from a similar background a chance to see themselves in the medical profession,” she said. “I didn’t grow up with much of that representation, and I want to inspire others.”
It’s clear, Sofia embodies the values we hold dearly here at Washington University and the values we hope to cultivate in all our students — resilience, a strong sense of purpose, a commitment to leadership and service, and the determination to improve the lives of others through life and career.
Using the pullquote block
This pullquote is right-aligned, so surrounding text wraps around it.
This citation field is optional
Pullquotes highlight engaging content to draw readers into a page.
If you left- or right-align the pullquote block, the entire block floats to the side of the page, with surrounding text wrapping around it. This alignment is ideal if the pullquote duplicates a passage from the page, so the quote doesn’t interrupt the flow of the content.
Pullquote block settings:
- Left or right-align the entire block by selecting the “change alignment” icon from the block’s top toolbar.
- Change the accent color of the vertical bar (default is red) in the settings panel on the right. Click the styles dropdown to select a different color.
Tips for quoting longer passages (blockquotes)
Blockquotes are commonly used to offset a longer passage cited from an external source. Both the quote and the pullquote blocks can be used for longer passages.
Since centered text can be difficult to read, left-aligned text is best for longer passages (four lines or more).
Quote block, with text aligned left:
Pull quotes are short excerpts from the presented text. They are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article. Just like a pull quote, blockquotes are also set off from the main text as a distinct paragraph or block. However, they refer to some external citation which isn’t already mentioned in the article. Block quotations are usually placed within the reader’s flow.
Smashing Magazine, “Block Quotes and Pull Quotes: Examples and Good Practices”
Pullquote block, with default block alignment (centered):
Pull quotes are short excerpts from the presented text. They are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article. Just like a pull quote, blockquotes are also set off from the main text as a distinct paragraph or block. However, they refer to some external citation which isn’t already mentioned in the article. Block quotations are usually placed within the reader’s flow.
Smashing Magazine, “Block Quotes and Pull Quotes: Examples and Good Practices”