Quote

This documentation is currently being revised and is in beta status. Content may still change.

This component is being retested for accessibility. The full test is still pending and can only be completed after a release.

Synonyms: Block quote, Quotation, Text citation

Description: The Quote component presents quotations with a source reference. It supports two display variants: an inline variant for short quotations within body text and a block variant for highlighted, indented quotations. The component semantically connects the quotation with the source via a link.

Example

Display of the standard block variant with quote and source reference:

<KolQuote _href="https://public-ui.github.io/en/docs" _label="KoliBri" _quote="Together, we make HTML semantically accessible using reusable Web Components to ensure usability and accessibility." _variant="block" />

Accessibility

• The component uses semantic HTML (<blockquote> or <q>) depending on the variant, to correctly inform screen readers and assistive technologies about the structure.
• The optional _label is rendered as a heading or label for the quotation and improves orientation.
• The source link (_href) is fully accessible and can be focused via keyboard.
• The quotation (_quote) is read directly as text content.

Links and References

Usage

Best Practices / Recommendations

• Inline for body text: Use the inline variant for short quotations within running text or sentences.
• Block for emphasis: Use the block variant for longer, standalone quotations that should receive visual attention.
• Require source attribution: Always provide a source (_href) so readers can trace the origin of the quotation.
• Meaningful labels: Use _label for author, work, or context information to contextualise the quotation.
• Accurate quotations: Reproduce quotations exactly and avoid paraphrasing without indication.
• Choose the correct variant: Decide between inline and block based on the length and significance of the quotation – maintain consistency within the document.

Use Cases

• Testimonials: Customer reviews or user feedback on websites or in marketing material.
• Literary references: Quotations from books, articles, or speeches in editorial content.
• Research: Quotations from academic papers, studies, or sources in academic or informative-journalistic texts.
• Endorsements: Approvals, recommendations, or confirmations from authorities or experts.
• Design elements: Visual highlights in brochures, web pages, or presentations to reinforce messages.

FAQ

When should I use the block variant?
The block variant is suitable for longer, standalone quotations that should stand out from body text. Use it when the quotation spans at least one or two sentences.

What citation format should I use for _label?
The separator is flexible – common formats include "Author, Work", "Source (Date)", or simply just the author's name. Consistency within the document is key.

Can I format the quotation with HTML or Markdown?
The _quote attribute expects plain text. Formatting should be done via CSS or additional structural elements outside the component.

Construction / Technology

Playground

Test the various properties of the Quote component:

Variant

<KolQuote _href="https://public-ui.github.io/en/docs" _label="KoliBri" _quote="Together, we make HTML semantically accessible using reusable Web Components to ensure usability and accessibility." _variant="block" />

Functionality (with Code)

Variants

The Quote component offers two display variants:

Variant

<KolQuote _href="https://public-ui.github.io/en/docs" _label="KoliBri" _quote="Together, we make HTML semantically accessible using reusable Web Components to ensure usability and accessibility." _variant="inline" />

Available variants:

• inline: Short quotation within body text (default)
• block: Highlighted, indented quotation

Label and Source Reference

The optional label can serve as an author or work reference, while _href enables source verification:

<KolQuote _href="https://public-ui.github.io/en/docs" _label="Albert Einstein" _quote="Together, we make HTML semantically accessible using reusable Web Components to ensure usability and accessibility." _variant="block" />

API

Overview

The Quote component has two variants: a short inline (inline) and an indented block (block) variant. Both variants include a link to the source of the quote.

Properties

Property	Attribute	Description	Type	Default
_href (required)	_href	Sets the target URI of the link or citation source.	string	undefined
_label	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string | undefined	undefined
_quote (required)	_quote	Defines the text of the quote.	string	undefined
_variant	_variant	Defines which variant should be used for presentation.	"block" | "inline" | undefined	'inline'

---

Examples