/// Typography
Blockquote
Pull quote — a hairline ink rule, lead-size text, and a mono attribution slot.
import { Blockquote } from "@protocore/pds";Basics
Blockquote renders a pull quote: a left ink rule, lead-size medium-weight text, balanced across lines.
The network you deploy to should be an implementation detail, not a strategic bet.
Attribution
author and cite render as a mono, muted attribution line beneath the quote.
Immutability is a feature, not a constraint — what cannot change cannot be quietly taken away.
When to use it
Use Blockquote to pull a memorable line out of long-form prose — a customer statement, a thesis sentence, a spec excerpt. The lead-size text and hairline rule make it a visual rest in a wall of body copy.
It is for *quoted or emphasised prose*, not for system messaging. To draw attention to an operational note, warning, or tip, use Callout, which carries a tone and an icon. If you only need one emphatic sentence without attribution, that's fine — author and cite are optional.
Guidelines
Do
- Use it to surface a quote or thesis line from long-form content.
- Fill `author` and `cite` when the quote has a source.
- Keep the quote to a sentence or two for the most impact.
- Let the text wrap naturally — it is balanced for you.
Don't
- Don't use it for warnings, tips, or system notes — that is `Callout`.
- Don't nest headings or controls inside the quote.
- Don't add manual quotation marks; the styling carries the role.
- Don't use it as a generic indented container.
Accessibility
- Renders a semantic `<blockquote>` with the attribution in a `<footer>` and the source in a `<cite>` element.
- The left rule and lead size are visual emphasis; the quote semantics come from the element itself.
- Keep any real source URL on a `Link` inside `cite` rather than making the whole quote a link.
Blockquote props
| Prop | Type | Default | Description |
|---|---|---|---|
author | ReactNode | — | Attribution — the speaker or author, rendered mono/muted below the quote. |
cite | ReactNode | — | Source of the quote, rendered mono/muted after the author. |
className | string | — | |
style | CSSProperties | — |