Lily Design System™

Blockquote

A blockquote is a block-level quotation rendered as a native <blockquote> element. It optionally carries a source citation URL via the cite attribute and visible attribution text rendered inside a <footer>.

Use it to set off extended quotations from surrounding prose, such as quoted passages from articles, interviews, books, speeches, or testimonials.

Example

Blockquote
Show demo markup 
<div class="blockquote" aria-label="a block-level quotation with optional source citation">Blockquote</div>
Usage example 
<script lang="ts">
  import Blockquote from './Blockquote.svelte';
</script>

<Blockquote cite="https://example.com" citationText="— Jane Doe, A Book">
  <p>The best way to predict the future is to invent it.</p>
</Blockquote>
Show Svelte source 
// In your Svelte component:
import Blockquote from "lily-design-system-svelte-headless/components/Blockquote/Blockquote.svelte";

<Blockquote>
  <!-- content -->
</Blockquote>

Usage

Basic blockquote with quoted content:

<Blockquote>
  <p>The best way to predict the future is to invent it.</p>
</Blockquote>

Blockquote with citation and source URL:

<Blockquote cite="https://example.com/source" citationText="— Alan Kay, 1971">
  <p>The best way to predict the future is to invent it.</p>
</Blockquote>

Props

  • cite: string (optional) -- URL of the source, rendered as cite attribute
  • citationText: string (optional) -- visible attribution text in the footer
  • label: string (optional) -- aria-label override
  • children: slot -- the quoted content
  • ...restProps: any additional HTML attributes

Keyboard Interactions

  • None (passive element)

ARIA

  • Implicit blockquote semantics from the <blockquote> element
  • aria-label optional override of the accessible name
  • The cite attribute references the source URL but is not surfaced to most assistive tech

When to Use

  • Use for extended quotations of one or more sentences, especially ones that warrant visual separation.
  • Use when the quote has a known author or source you can attribute.
  • Use to highlight customer testimonials and pull quotes within editorial layouts.

When Not to Use

  • Do not use for short inline quotations — use the <q> element instead.
  • Do not use as a generic styled container — semantic meaning matters.

Headless

Renders a native <blockquote> with optional cite and aria-label attributes, and an optional <footer> containing attribution text. Visual treatment of the quote, indentation, decorative quote marks, and footer styling are entirely the consumer's responsibility.

Styles

Consumer CSS targets the blockquote class on the root element and the blockquote-citation class on the footer. Provide indentation, optional decorative quote glyphs, and clear separation between the quote body and the attribution.

Testing

  • Verify the component renders a <blockquote> element with class blockquote
  • Verify the native cite attribute equals the cite prop when provided
  • Verify the <footer class="blockquote-citation"> element renders only when citationText is provided
  • Verify aria-label is rendered when label is provided
  • Verify children content is rendered inside the blockquote

Advice

  • Designers: Indent the quote body, use a clear typographic hierarchy between the quote and its attribution, and avoid relying on decorative quotation marks alone for meaning.
  • Developers: Always supply cite (URL) and citationText (visible attribution) when the source is known. Keep visual quotation marks in CSS so screen readers do not announce them twice.

Implementation Notes

  • Uses a native <blockquote> element for inherent quotation semantics
  • cite prop maps to the native cite attribute (a URL identifying the source)
  • citationText prop renders inside a <footer class="blockquote-citation"> element
  • label prop is optional and overrides the implicit accessible name via aria-label
  • children provide the quoted content
  • No JavaScript behavior; the component is passive

Related components

  • citation — a citation acknowledges the relevance of a work of another to the topic of discussion
  • inset-text — indented text to distinguish it from surrounding content

References

  • MDN <blockquote>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
  • HTML Living Standard — The blockquote element: https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element
  • Mozilla Protocol Design System: https://protocol.mozilla.org/

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: blockquote
  • PascalCase: Blockquote
  • Description: a block-level quotation with optional source citation
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <blockquote>
  • CSS class: .blockquote
  • Interactive: no

ARIA

  • Implicit blockquote semantics from the <blockquote> element
  • aria-label optional override
  • cite attribute references source URL (HTML semantic, not surfaced to most AT)

Keyboard

  • None (passive element)

Props

  • cite: string (optional) -- URL of the source
  • citationText: string (optional) -- visible attribution text
  • label: string (optional) -- aria-label override
  • children: slot -- quoted content
  • ...restProps: any additional HTML attributes