# Blockquote

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

URL: https://apogee.avaui.dev/docs/blockquote
Last updated: 2026-10-15

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

Last updated October 15, 2026

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

## Add

```sh
npx @ava-ui/apogee add blockquote
```

No Apogee dependencies.

## Usage

```astro
---
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.

```astro
<Blockquote>No attribution — the quote stands alone.</Blockquote>
```

## Examples

A quote spanning multiple paragraphs:

```astro
<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.

](https://apogee.avaui.dev/docs/prose)[

TextBody copy with a size scale and semantic colours. Renders p, span, or div.

](https://apogee.avaui.dev/docs/text)[

CodeInline code or a code block with build-time highlighting, line numbers, a copy button and a collapsible long view.

](https://apogee.avaui.dev/docs/code)