Quote-block

Block-level quotation with optional attribution. Native <blockquote> for semantics. Three variants for different visual emphasis.

When to use

• Pulled testimonials on landing pages.
• Sidebars within articles.
• Featured quotes inside Card or Section components.

For inline quotation (within a paragraph), use native <q> — no component needed.

Variants

Anatomy

<blockquote class="quote-block">
  <p class="quote-block__body">
    Simple things should be simple, complex things should be possible.
  </p>
  <footer class="quote-block__attribution">
    — <cite class="quote-block__cite">Alan Kay</cite>
  </footer>
</blockquote>

<!-- Card style -->
<blockquote class="quote-block -card">
  <p class="quote-block__body">
    The product surprised everyone — including the team that built it.
  </p>
  <footer class="quote-block__attribution">
    <cite class="quote-block__cite">Director of Engineering</cite>,
    a major retail brand
  </footer>
</blockquote>

<!-- Centered pull-quote for landing pages -->
<blockquote class="quote-block -pull">
  <p class="quote-block__body">
    "We shipped twice as fast after switching."
  </p>
  <footer class="quote-block__attribution">
    <cite class="quote-block__cite">Engineering lead</cite>
  </footer>
</blockquote>

Tokens used

• --color-accent — default border rule
• --color-border-muted — muted variant rule
• --color-surface-raised — card variant background
• --color-ink-strong, --color-ink-regular
• --space-inset-block-{m,l} — padding
• --space-gap-elements-m — gap between body and attribution
• --radius-card — card variant radius
• --border-width-emphasis — rule thickness
• --font-heading-section-*, --font-heading-title-*, --font-body-support-* — typography

Accessibility

<blockquote> carries the semantic role for quoted material. Pair with cite= URL attribute if the source is online:

<blockquote class="quote-block" cite="https://example.com/source">
  …
</blockquote>

The <cite> element inside __attribution denotes the author or source name (not a URL — the attribute on <blockquote> carries the URL). Per HTML spec, <cite> should reference the title of a work or the name of the source, not the speaker. We bend this slightly to attribute the speaker, which is the common pattern in web typography.

Edge cases

• Multi-paragraph quotes: wrap each paragraph in its own .quote-block__body <p>. The CSS adds gap between successive bodies.
• Without attribution: drop the <footer>. The component renders fine with just the body.
• Inside dark surfaces: override ink tokens locally; the component does not have an inverse variant in v1.0.

Do

• Use <blockquote> as the outer element.
• Use <cite> inside attribution for the speaker/source name.
• Keep pull-quote bodies short (1-2 sentences max).

Don't

• Don't add quotation marks manually — the typography carries enough visual signal. (Add them only if your design language requires.)
• Don't apply .quote-block to a non-<blockquote> element.