Blockquote
Quoted passage with optional attribution footer
Category: display · WCAG 2.2-AA · typography, quote, blockquote, citation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cite | string | undefined | URL of the quote’s source (sets the HTML cite attribute). |
children | ReactNode | — | The quoted content |
Design tokens
--cascivo-color-border-strong--cascivo-color-text--cascivo-color-text-subtle--cascivo-font-sans--cascivo-font-medium--cascivo-leading-relaxed--cascivo-text-sm--cascivo-text-base
When to use
- Setting off a quoted passage from another source with visual emphasis
- Attributing a quote to a person or work via the cite footer
When not to use
- Indenting or emphasizing your own non-quoted text — use Text styling
- Inline quotations within a sentence — use a <q> element
How to build an accessible Blockquote in React →
Examples
Default
<Blockquote>Less, but better.</Blockquote>With attribution
Attribution renders as <footer><cite>
<Blockquote cite="Dieter Rams">Less, but better.</Blockquote>Related components
- Prose — Prose styles blockquotes among other long-form elements automatically