Skip to main content

UI components · Text

Blockquote

Also called: Quote, Pull quote, Block quote, Quotation

A passage in an article quoted from someone else or another source. It has a vertical bar on the left, is indented, uses a slightly lighter text color, and ends with the source.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Make blockquotes in article text consistent. Use the blockquote tag with a 3px light gray bar on the left (#D1D5DB), 16px left padding, 20px vertical margin, and 16px text in #4B5563 with 1.75 line height, no italics. Put the source on its own line in a figcaption, 14px gray, starting with "—". Also create a pull quote style: 22px text, centered, with a 40px light gray quotation mark above it and 32px of space above and below; use it no more than once or twice per long article. Don't use blockquote for plain indentation or tip boxes.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Blockquote is what you need.

Use Blockquote when

  • Quoting someone's exact words, interview content, or a passage from other material in an article or report
  • Keeping the original message in an email or forum reply
  • Turning one key sentence into a pull quote in a long article, to break up big blocks of text and highlight the point

Pick something else when

  • The author's own "Note" or "Tip." Use an alert, with an icon and color.

    Use insteadAlert
  • Customer recommendations on a marketing site. Use testimonial cards with an avatar and company.

    Use insteadTestimonial
  • Just wanting a paragraph indented or grayed out. Change the style directly instead of using the quote tag.

    Use insteadParagraph

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Wrapping a paragraph in blockquote just to indent it, so screen readers announce the author's own words as a quote

  2. 02

    Quotes with no source, so readers don't know who said it or whether to trust it

  3. 03

    Page after page of quotes, with the bars running together so you can't tell which views are the author's own

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

An indented passage of quoted text (usually with a bar on the left and lighter or italic text) plus a line with the source. A pull quote is one enlarged, centered sentence with big quotation marks.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A blockquote separates "what someone else said" from the author's own writing: a famous quote, a line from a user interview, a passage from another article, or the original message kept in an email reply. In HTML, it's the blockquote tag. The common style is a 3 to 4px vertical bar on the left, the whole passage indented, text a little lighter or in italics, and a line below like "— Liam Carter, CTO at Acme" naming the source (inside cite or figcaption). Magazine-style pages also use a "pull quote": one sentence from the body, enlarged and centered with big quotation marks, as a visual highlight.

It's easy to confuse with an Alert, because docs sites often draw "Note" and "Tip" boxes with a bar on the left too. An alert is the author's own reminder, with an icon and colors that show how serious it is. A blockquote is someone else's words and doesn't mean any status. How it differs from a Testimonial: testimonials are cards on a marketing site with an avatar, name, company, and star rating, meant to show the product is good. A blockquote is just a quoted passage in the body text.

Only use blockquote when you're actually quoting someone, not to make a paragraph look nicely indented. Say clearly who said it and where. If the original is long, pick the key sentence. Leave paragraph spacing above and below, and keep the bar light gray or a pale brand color so it doesn't outshine the text.

Developer info
Term ID
component-blockquote
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • blockquote
  • .blockquote
  • figure:has(> blockquote)
Class keywords

Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.

  • blockquote
  • block-quote
  • quote
  • quote-block
  • pull-quote
  • pullquote
  • quotation
Component names

React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.

  • Blockquote
  • BlockQuote
  • Quote
  • PullQuote
Semantic tags and roles

A weak signal. It only counts together with other cues.

  • <blockquote>
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 30, 2026