Quote
Blockquote with attribution in Fraunces italic; the pull variant renders the brand's signature phrases large and centered.
Examples
Blockquote
The role of the teacher is to create the conditions for invention rather than provide ready-made knowledge.
HTML for “Blockquote”
<figure class="mp-quote">
<blockquote class="mp-quote__text">
<p>The role of the teacher is to create the conditions for invention rather than provide ready-made knowledge.</p>
</blockquote>
<figcaption class="mp-quote__source">— <cite>Seymour Papert</cite>, <i>Mindstorms</i></figcaption>
</figure>Pull quote
Human intelligence, amplified with technological intentionality.
HTML for “Pull quote”
<figure class="mp-quote" data-variant="pull">
<blockquote class="mp-quote__text"><p>Human intelligence, amplified with technological intentionality.</p></blockquote>
</figure>Guidance
Quotes are the human register at its most literal: Fraunces italic, terracotta rule. Use the figure + figcaption structure so the attribution is programmatically tied to the quote.
Accessibility
- Put the attribution in
<figcaption>, not inside the<blockquote>— only quoted words belong in the quote. - Pull quotes that repeat body text should be
aria-hidden="true"to avoid reading the sentence twice.
API
| Class | Kind |
|---|---|
.mp-quote | root |
.mp-quote__text | part of .mp-quote |
.mp-quote__source | part of .mp-quote |
| Attribute | Values |
|---|---|
data-variant | pull |
No component tokens: Quote reads the semantic tokens directly.
Design tokens consumed: --border-width-thick --color-action-primary --color-human-text --color-text-primary --color-text-secondary --container-sm --font-sans --font-serif --leading-body-lg --leading-heading --leading-small --space-12 --space-3 --space-6 --space-8 --text-body-lg --text-h2 --text-small --tracking-heading --weight-medium --weight-regular --weight-semibold