A visually distinct decorative quote with optional citation/attribution. Styled differently from standard prose <blockquote> elements with larger text, decorative borders, and a quotation mark accent.
File: src/core/components/ui/Pullquote.astro
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
citation | string | — | Attribution text (e.g., author name) |
cite | string | — | Source URL — applied to the <blockquote cite> attribute |
quoteStyle | "svg" | "text" | "none" | "svg" | Decorative quote mark style |
class | string | — | Additional CSS classes |
quoteStyle
"svg"(default) — renders an inline SVG double-quote icon above the text."text"— uses a CSS unicode quote character (\201C)."none"— no quote decoration; only the border-left accent remains.
Usage
---
import Pullquote from "@core/components/ui/Pullquote.astro";
---
{/* SVG quote (default) */}
<Pullquote>
<p>Design is not just what it looks like. Design is how it works.</p>
</Pullquote>
{/* Text quote character */}
<Pullquote quoteStyle="text">
<p>Simplicity is the ultimate sophistication.</p>
</Pullquote>
{/* No decoration, with citation */}
<Pullquote quoteStyle="none" citation="Dieter Rams">
<p>Less, but better.</p>
</Pullquote>Accessibility
- Renders semantic
<figure>containing<blockquote>with optional<figcaption>for citation. - The
<blockquote cite>attribute links to the source when a URL is provided. - No keyboard interaction required — purely presentational content.