How to Style Blockquotes and Pull Quotes Effectively?

You publish an interview with a customer and want their best line to jump off the page. You wrap it in a blockquote, the browser indents it 40px on each side, and that is it — same size, same color, barely distinguishable from the paragraph above. So you make it 32px italic, centered, in brand purple, with a giant quotation mark. Now it looks like an ad, screen readers announce it as a quotation even though the same sentence already appears in the article, and on a phone it takes up the entire screen.

Quotations are a small part of most articles, but they are high-visibility elements, and they are easy to get wrong in both markup and design. This article explains the difference between blockquotes and pull quotes, the correct HTML for each, and practical CSS patterns for styling them so they stand out without hurting readability or accessibility.

Blockquotes vs. Pull Quotes

The two look similar but serve different purposes.

A blockquote is an extended quotation from another source: a passage from a book, a statement from a person, an excerpt from documentation. The quoted text is part of the content and appears only once. It belongs in a blockquote element.

A pull quote is an excerpt copied from the article itself and displayed prominently to catch skimming readers' attention. The text already exists in the body, so the pull quote is a decorative repetition. It should not be marked up as a blockquote, and it usually should be hidden from screen readers to avoid reading the same sentence twice.

Aspect	Blockquote	Pull quote
Source	External: a person, book, or document	Internal: repeated from the same article
Purpose	Present quoted content	Draw attention, aid scanning
HTML element	blockquote with optional cite	aside or figure, often aria-hidden
Appears in body	Once, as part of the flow	Twice: in the body and in the pull quote
Typical styling	Inset, border or background, body-ish size	Larger size, display font, wide or floated
Length	A sentence to several paragraphs	One short sentence, ideally under 25 words

Correct Markup for a Blockquote

A basic blockquote with attribution uses figure and figcaption, because the attribution is not part of the quotation itself:

<figure class="quote">
  <blockquote cite="https://example.com/interview">
    <p>
      We cut our page weight in half just by self-hosting fonts and dropping
      the weights we never used.
    </p>
  </blockquote>
  <figcaption>
    Priya Natarajan, <cite>Frontend Performance Weekly</cite>
  </figcaption>
</figure>

Notes on the elements:

• The cite attribute on blockquote holds a URL for the source. Browsers do not display it, but it is machine-readable.
• The cite element marks up the title of a work, such as a book, article, or publication. It should not be used for a person's name.
• Put the attribution in figcaption, outside the blockquote, so it is not presented as part of the quoted words.

For short inline quotations within a sentence, use the q element, which adds locale-appropriate quote marks automatically.

Blockquotes in Markdown

In Markdown, a line starting with > produces a blockquote. With MDX or most Markdown renderers, this:

> Typography is the craft of endowing human language with a durable visual form.
>
> — Robert Bringhurst, _The Elements of Typographic Style_

renders as a blockquote containing two paragraphs. The attribution ends up inside the quote, which is common and acceptable in Markdown content. If precise semantics matter, use a custom component or shortcode instead.

Styling Blockquotes

Browser default styling is a 40px horizontal margin and nothing else. You need a clear but quiet treatment, since blockquotes can be long and must remain readable.

Pattern 1: Left Border

The most common and most reliable pattern:

.prose blockquote {
  margin-block: 1.75em;
  margin-inline: 0;
  padding-inline-start: 1.25em;
  border-inline-start: 4px solid #d0d7de;
  color: #3d444d;
  font-style: normal;
}

.prose blockquote > * + * {
  margin-block-start: 0.75em;
}

Logical properties like border-inline-start flip automatically for right-to-left languages. Keep the text color at least 4.5:1 against the background (WCAG 1.4.3); #3d444d on white is roughly 10:1.

Pattern 2: Background Panel

A tinted panel works well for longer quotes and testimonials:

.prose blockquote {
  margin-block: 2em;
  margin-inline: 0;
  padding: 1.25em 1.5em;
  background: #f6f8fa;
  border-radius: 0.5rem;
  border-inline-start: 4px solid #0969da;
}

Check contrast against the panel color, not just the page background.

Pattern 3: Decorative Quote Mark

A large opening quotation mark is a classic flourish. Add it with a pseudo-element so it is not part of the text content:

.quote {
  position: relative;
  margin-block: 2.25em;
  padding-inline-start: 2.5em;
}

.quote blockquote {
  margin: 0;
  font-size: 1.125em;
  line-height: 1.55;
}

.quote::before {
  content: "\201C";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.15em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4em;
  line-height: 1;
  color: #8c959f;
}

.quote figcaption {
  margin-block-start: 0.75em;
  font-size: 0.9em;
  color: #57606a;
}

.quote figcaption::before {
  content: "\2014\00a0";
}

\201C is the left double quotation mark, and \2014\00a0 is an em dash followed by a non-breaking space. Using a serif face for the mark gives it a traditional shape even if your body font is sans-serif.

Should Blockquotes Be Italic?

Italic is a traditional choice, but long italic passages are harder to read, especially for dyslexic readers. Keep long quotes upright and use the border or panel to signal quotation. Reserve italic for short quotes or emphasis within the quote.

Styling Pull Quotes

Pull quotes are design elements. Their job is to make a skimming reader stop, so they can be larger and more expressive than blockquotes, as long as they stay short.

Markup

<aside class="pull-quote" aria-hidden="true">
  <p>Most readers decide whether to keep reading within the first few headings.</p>
</aside>

Using aria-hidden="true" hides the duplicate from screen readers, since the same sentence already appears in the body. Do not put links or interactive elements inside a hidden pull quote, as they would become unreachable for assistive technology users while remaining focusable.

Centered, Full-Width Pull Quote

.pull-quote {
  margin-block: 2.5em;
  padding-block: 1.25em;
  border-block: 2px solid #1f2328;
  text-align: center;
}

.pull-quote p {
  margin: 0 auto;
  max-width: 28ch;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

text-wrap: balance keeps the lines of the quote evenly sized, which matters a lot for large, centered text. The max-width in ch stops it from becoming one long line on wide screens.

Floated Pull Quote on Wide Screens

Magazine layouts often float the pull quote into the margin so body text wraps around it. Do this only on wide screens:

.pull-quote--side {
  margin-block: 1.5em;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  color: #0969da;
}

@media (min-width: 64rem) {
  .pull-quote--side {
    float: inline-end;
    width: 40%;
    margin-inline: 1.5em -6rem;
    padding-inline-start: 1em;
    border-inline-start: 3px solid currentColor;
  }
}

The negative end margin pushes the quote partly into the page gutter so the body column is not squeezed too narrow. Make sure the gutter actually has that space at the breakpoint you choose. Check the brand color's contrast too. Text around 22px semibold sits near WCAG's large-text threshold (24px regular or about 18.66px bold), so aim for 4.5:1 to be safe; #0969da on white is just under 5:1.

Testimonials Are Blockquotes Too

Customer testimonials are quotations from external people, so they use the blockquote pattern, usually with a photo and role:

<figure class="testimonial">
  <blockquote>
    <p>The migration took one afternoon and our build times dropped by 40%.</p>
  </blockquote>
  <figcaption>
    <img src="/images/people/sam.jpg" alt="" width="48" height="48" />
    <span>
      <strong>Sam Ortiz</strong>
      <span>Lead Engineer, Northwind</span>
    </span>
  </figcaption>
</figure>

.testimonial {
  margin: 0;
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 0.75rem;
}

.testimonial blockquote {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 1rem;
  font-size: 0.9rem;
}

.testimonial img {
  border-radius: 50%;
}

The photo uses an empty alt because the name is already in the caption, so describing the image adds nothing.

Tailwind CSS v4 Version

If you style rendered Markdown with the Tailwind Typography plugin, you can override its blockquote defaults with element modifiers. Our guide to the Tailwind Typography plugin covers setup.

<article
  class="prose prose-blockquote:not-italic prose-blockquote:font-normal prose-blockquote:border-l-4 prose-blockquote:border-sky-600 prose-blockquote:text-slate-700"
>
  <!-- Markdown content -->
</article>

The plugin adds quotation marks to blockquote paragraphs by default with ::before and ::after content. If you do not want them, disable them in CSS:

.prose :where(blockquote p:first-of-type)::before,
.prose :where(blockquote p:last-of-type)::after {
  content: none;
}

Spacing, Size, and Rhythm

Quotes interrupt the reading flow, so give them more space than a normal paragraph — about 1.5–2.5em above and below. Keep the line length reasonable: a blockquote indented within a 68ch column is fine, but a pull quote spanning a full-width layout needs its own max-width.

For size:

• Blockquotes: same size as body text or up to about 1.125em. Long quotes need body-size text.
• Pull quotes: 1.4–2em, set in a display or heading font, often semibold. Keep them under about 25 words.
• Attribution: smaller than the quote, around 0.875–0.9em, in a secondary color that still meets 4.5:1 contrast.

For more on balancing these elements in a long article, see how to style long-form articles and our guide to using whitespace in typography.

Common Mistakes

1. Using blockquote for indentation. It is a semantic element, not a layout tool.
2. Marking pull quotes as blockquotes. Screen readers announce them as quotations and read duplicated text.
3. Long italic quotes. Hard to read for many users.
4. Low-contrast quote text. Light gray on a tinted panel often fails 4.5:1.
5. Huge pull quotes on mobile. A 40px quote can fill the whole screen. Scale with clamp().
6. Too many pull quotes. One per 1,000–1,500 words is plenty; more and they lose impact.
7. Using cite for a person's name. It is for titles of works.

---

Blockquote and Pull Quote FAQ

Conclusion

Blockquotes and pull quotes look alike but do different jobs. Blockquotes present quoted material from other sources and belong in a blockquote with a figcaption for attribution. Pull quotes repeat a striking line from your own article to stop skimmers, so they belong in an aside hidden from screen readers. Getting the markup right first keeps your content accessible and meaningful.

For styling, keep blockquotes readable with a border or panel, body-sized upright text, and solid contrast. Let pull quotes be bolder with a larger display face, balanced wrapping, and generous space, while keeping them short and scaled for mobile. Used sparingly, both give long content texture and give readers a reason to slow down.

Here are some useful references for going deeper on blockquotes and pull quotes:

1. MDN Web Docs: The Block Quotation element — usage, the cite attribute, and attribution guidance.
2. MDN Web Docs: The Citation element — when to use cite for titles of works.
3. WHATWG HTML Standard: The blockquote element — the specification, including examples of attribution with figure and figcaption.
4. MDN Web Docs: quotes — controlling the quotation marks used by the q element and generated content.
5. MDN Web Docs: text-wrap — balancing lines in large pull quotes.