Blockquote

A pull quote with optional attribution. Use to set a quoted passage apart from body copy.

Last updated

The Analytical Engine has no pretensions whatever to originate anything.

— Ada Lovelace
Show code
<Blockquote cite="Ada Lovelace">
The Analytical Engine has no pretensions whatever to originate anything.
</Blockquote>

Add

npx @ava-ui/apogee add blockquote

No Apogee dependencies.

Usage

---
import Blockquote from '@/components/apogee/Blockquote/Blockquote.astro'
---
<Blockquote cite="Ada Lovelace">The Analytical Engine …</Blockquote>

API

@composable — exposed to Content Editors in AVA. Any other native <figure> attribute (e.g. id, aria-label) passes through.

Prop Type Default Description
cite string — Attribution shown below the quote. Omit to render the quote alone.
class string — Extra classes, merged last.

States

No interactive states — Blockquote is static content.

No attribution — the quote stands alone.
Show code
<Blockquote>No attribution — the quote stands alone.</Blockquote>

Examples

A quote spanning multiple paragraphs:

The most dangerous phrase in the language is “we’ve always done it this way.”

One accurate measurement is worth a thousand expert opinions.

— Grace Hopper
Show code
<Blockquote cite="Grace Hopper">
<p>The most dangerous phrase in the language is "we've always done it this way."</p>
<p>One accurate measurement is worth a thousand expert opinions.</p>
</Blockquote>

Accessibility

  • Renders a real <figure> / <blockquote> / <figcaption> — screen readers announce the quote and its attribution correctly.
  • No extra ARIA needed.

Tokens

Token Used for
--font-serif Quote text (the device’s default serif stack)
--background-primary Left border rule
--foreground-neutral Quote text
--foreground-neutral-faded Attribution (cite) text

Do / Don’t

  • Do use it for an actual quoted passage — not to emphasize your own copy.
  • Do pass cite when the source is known; readers expect attribution.
  • Don’t nest interactive controls (buttons, links) inside — it’s a content block.

Content

  • Quote text keeps the source’s original wording — don’t paraphrase.
  • Attribution is a name (and optionally a role/source), not a full sentence: “Ada Lovelace”, not “As said by Ada Lovelace”.

Related

ProseTypography styling for a block of rich, CMS, or markdown HTML you don't control element by element.
TextBody copy with a size scale and semantic colours. Renders p, span, or div.
CodeInline code or a code block with build-time highlighting, line numbers, a copy button and a collapsible long view.