Quote
Quote — a quotation with its attribution.
Examples
The trouble with fiction is that it makes too much sense.
<figure class="quote">
<blockquote class="quote-text" cite="https://example.com/essay">
<p>The trouble with fiction is that it makes too much sense.</p>
</blockquote>
<figcaption class="quote-attribution">
<span class="quote-author">Aldous Huxley</span>,
<cite class="quote-source">Brave New World Revisited</cite>
</figcaption>
</figure>A <blockquote> may not contain its own attribution — per the HTML spec it belongs outside, which is why this is a <figure> with a <figcaption>.
The wrong version, a <footer> inside the quote, is everywhere including in framework documentation, and it changes what the page claims was said.
Everything should be made as simple as possible, but no simpler.
<blockquote class="quote quote-text">
<p>Everything should be made as simple as possible, but no simpler.</p>
</blockquote>No <figure>, because a figure with no caption adds nothing. Both classes go on the blockquote: .quote declares the tokens and .quote-text consumes them.
Tokens 15
Level 2, declared on .quote itself. Set any of them on that selector to restyle this component without touching the skin.
| Token | Default |
|---|---|
| --quote-paragraph-gap | var(--space-3) |
| --quote-color | var(--color-on-surface-muted) |
| --quote-font-family | var(--font-tertiary) |
| --quote-padding-inline | var(--space-4) |
| --quote-rule-color | var(--color-border-strong) |
| --quote-rule-width | var(--border-width-strong) |
| --quote-attribution-color | var(--color-on-surface-muted) |
| --quote-attribution-font-size | var(--font-size-sm) |
| --quote-attribution-gap | var(--space-4) |
| --quote-author-color | var(--color-on-surface) |
| --quote-mark | "" |
| --quote-mark-color | var(--color-border) |
| --quote-mark-size | 5rem |
| --quote-font-size | var(--font-size-base) |
| --quote-line-height | var(--line-height-snug) |
Variants and states
Variants
.quote-text.quote-lg.quote-pull.quote-sm
Inside it
.quote-attribution.quote-author.quote-source
State it reads
Read from the platform, never mirrored into a class that could disagree with it.
data-legacy
Before you ship it
What you have to do 3 requirements
- Never put the attribution inside the
<blockquote>. See above. <cite>names the work, not the person.- A pull quote repeating body copy needs
aria-hidden="true"on the figure.
src/css/components/quote.css · npx mostlycss add quote