blockquote
The blockquote element represents a section quoted from another source, with VB styling for attribution, prose refinement, and academic citation patterns.
Description
The <blockquote> element represents an extended quotation from another source. VB styles it with a left border, muted italic text, and automatic em-dash attribution via <footer> or <cite> inside the blockquote.
VB also adds typographic refinements: hanging-punctuation: first last for Safari, and a de-emphasis reset for <em>/<i> inside blockquotes (since the blockquote is already visually offset, double-italic would be redundant).
When to Use
- Extended quotations: Quotes from books, articles, speeches
- Testimonials: Customer quotes and endorsements
- Pull quotes: Highlighted excerpts (use
<figure class="quote">) - Academic citations: Referenced passages with source attribution
- Epigraphs: Opening quotes in articles or chapters
When NOT to Use
- For short inline quotes — use
<q> - For content that isn't a quotation (even if you want the visual style)
- For indenting content — use CSS margins or
<layout-stack>
Examples
<blockquote> The best way to predict the future is to invent it.</blockquote><blockquote> The best way to predict the future is to invent it. <footer>Alan Kay</footer></blockquote><blockquote cite="https://example.com/source"> Any sufficiently advanced technology is indistinguishable from magic. <footer>Arthur C. Clarke, <cite>Profiles of the Future</cite></footer></blockquote>Attribution Patterns
VB auto-prepends an em dash (—) to <footer> or <cite> elements inside a blockquote. Combine both for author + work title:
| Pattern | Use Case |
|---|---|
<footer>Author Name</footer> |
Simple attribution (person) |
<cite>Work Title</cite> |
Work title only |
<footer>Author, <cite>Work</cite></footer> |
Author + work (recommended) |
cite="URL" attribute |
Machine-readable source URL (not displayed) |
Pull Quote (figure pattern)
Wrap a blockquote in <figure class="quote"> with a <figcaption> for pull quote styling. The figure removes blockquote margins and adds its own em-dash to the caption:
<figure class="quote"> <blockquote> Good design is as little design as possible. </blockquote> <figcaption>Dieter Rams, <cite>Less and More</cite></figcaption></figure>Academic Citations
For academic and research writing, use the cite attribute with a DOI or URL for machine-readable provenance. The footer can include full bibliographic information:
<blockquote cite="https://doi.org/10.1000/example"> <p>The results demonstrate a statistically significant correlation between design simplicity and user satisfaction scores (p < 0.01).</p> <footer>Smith & Jones (2025), <cite>Journal of Web Usability</cite>, Vol. 12, pp. 45–62</footer></blockquote>The cite attribute is not displayed but is available to scripts, search engines, and citation tools. Future VB features may auto-generate bibliography sections from cite attributes.
Foreign Language Quotes
Use the lang attribute when quoting in another language. VB's i18n system will apply appropriate font family and line height:
<blockquote lang="fr"> Je pense, donc je suis. <footer>René Descartes</footer></blockquote>CSS Reference
blockquote { padding-inline-start: var(--size-m); border-inline-start: var(--border-width-thick) solid var(--color-border); color: var(--color-text-muted); font-style: italic;} /* Attribution — auto em-dash prefix */blockquote footer,blockquote cite { display: block; margin-block-start: var(--size-s); font-style: normal; font-size: var(--font-size-sm); &::before { content: "— "; }}Prose Refinements
/* Hanging punctuation for typographic refinement (Safari) */blockquote { hanging-punctuation: first last; } /* Italic de-emphasis inside blockquotes */:where(blockquote) :where(i, em) { font-style: normal; font-weight: var(--font-weight-medium);}| Feature | Implementation |
|---|---|
| Left border | border-inline-start (RTL-safe) |
| Em-dash attribution | ::before { content: "— " } on footer/cite |
| Hanging punctuation | hanging-punctuation: first last (progressive, Safari) |
| Italic de-emphasis | em/i inside blockquote reset to normal + medium weight |
Accessibility
- Screen readers may announce "blockquote" before reading content
- Users can navigate between blockquotes on a page
- The
citeattribute is not announced but is available programmatically - Always provide attribution for external quotations
- Use
langfor quotes in different languages so screen readers switch pronunciation
Related
<q>— Short inline quotations with locale-aware marks<cite>— Title of a creative work (used inside blockquote for source)<figure>— Wraps blockquote + figcaption for pull quote pattern<footer>— Attribution inside blockquote<em>— De-emphasized inside blockquotes to avoid double-italic- Internationalization — Locale-specific font, line height, and hanging punctuation