Quote

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Blockzitat, Zitat, Textzitat

Beschreibung: Die Quote-Komponente präsentiert Zitate mit Quellenangabe. Sie unterstützt zwei Darstellungsvarianten: eine inline-Variante für kurze Zitate im Fließtext und eine block-Variante für hervorgehobene, eingerückte Zitate. Die Komponente verbindet das Zitat semantisch mit der Quelle über einen Link.

Beispiel

Darstellung der Standard-Block-Variante mit Zitat und Quellenangabe:

<KolQuote _href="https://public-ui.github.io/docs" _label="KoliBri" _quote="Wir machen gemeinsam HTML mittels wiederverwendbaren Web Components semantisch barrierefrei, um die Usability und Zugänglichkeit sicherzustellen." _variant="block" />

Barrierefreiheit

• Die Komponente verwendet semantisches HTML (<blockquote> oder <q>) je nach Variante, um Screenreader und assistive Technologien korrekt von der Struktur zu informieren.
• Der optionale _label wird als Überschrift oder Beschriftung des Zitats ausgegeben und verbessert die Orientierung.
• Der Quellenlink (_href) ist vollständig zugänglich und kann per Tastatur angesteuert werden.
• Das Zitat (_quote) wird als Textinhalt direkt vorgelesen.

Links und Referenzen

Verwendung

Best Practices / Empfehlungen

• Inline für Fließtext: Nutzen Sie die inline-Variante für kurze Zitate im fortlaufenden Text oder in Sätzen.
• Block für Hervorhebung: Verwenden Sie die block-Variante für längere, eigenständige Zitate, die visuelle Aufmerksamkeit erhalten sollen.
• Quellenangabe erfordern: Geben Sie immer eine Quelle (_href) an, damit Leser die Herkunft des Zitats nachvollziehen können.
• Aussagekräftige Labels: Nutzen Sie _label für Autoren-, Werk- oder Kontextangaben, um das Zitat zu kontextualisieren.
• Genaue Zitate: Reproduzieren Sie Zitate exakt und vermeiden Sie Paraphrasing ohne Hinweis.
• Korrekte Variante wählen: Entscheiden Sie basierend auf Länge und Bedeutung des Zitats zwischen inline und block – Konsistenz innerhalb des Dokuments wahren.

Anwendungsfälle

• Testimonials: Kundenbewertungen oder Nutzer-Feedback auf Websites oder in Marketing-Material.
• Literarische Verweise: Zitate aus Büchern, Artikeln oder Reden in redaktionellen Inhalten.
• Forschung: Zitate aus wissenschaftlichen Arbeiten, Studien oder Quellen in akademischen oder informativ-journalistischen Texten.
• Autorisierungen: Genehmigungen, Empfehlungen oder Bestätigungen durch Autoritäten oder Experten.
• Design-Elemente: Visuelle Highlights in Broschüren, Webseiten oder Präsentationen, um Botschaften zu verstärken.

FAQ

Wann sollte ich die block-Variante verwenden?
Die block-Variante ist sinnvoll für längere, eigenständige Zitate, die sich vom Fließtext abheben sollen. Verwenden Sie sie, wenn das Zitat mindestens ein bis zwei Sätze umfasst.

Welches Zitierformat sollte ich für _label nutzen?
Das Trennzeichen ist flexibel – gängig sind Formate wie „Autor, Werk", „Quelle (Datum)" oder einfach nur „Autorname". Wichtig ist Konsistenz innerhalb des Dokuments.

Kann ich das Zitat mit HTML oder Markdown formatieren?
Das _quote-Attribut erwartet reinen Text. Formatierungen sollten über CSS oder zusätzliche strukturelle Elemente außerhalb der Komponente erfolgen.

Konstruktion / Technik

Playground

Testen Sie die verschiedenen Eigenschaften der Quote-Komponente:

Variant

<KolQuote _href="https://public-ui.github.io/docs" _label="KoliBri" _quote="Wir machen gemeinsam HTML mittels wiederverwendbaren Web Components semantisch barrierefrei, um die Usability und Zugänglichkeit sicherzustellen." _variant="block" />

Funktionalitäten (mit Code)

Varianten

Die Quote-Komponente bietet zwei Darstellungsvarianten:

Variant

<KolQuote _href="https://public-ui.github.io/docs" _label="KoliBri" _quote="Wir machen gemeinsam HTML mittels wiederverwendbaren Web Components semantisch barrierefrei, um die Usability und Zugänglichkeit sicherzustellen." _variant="inline" />

Verfügbare Varianten:

• inline: Kurzes Zitat im Fließtext (Standard)
• block: Hervorgehobenes, eingerücktes Zitat

Label und Quellenangabe

Der optionale Label kann als Autor- oder Werkangabe dienen, während _href die Quellenverifizierung ermöglicht:

<KolQuote _href="https://public-ui.github.io/docs" _label="Albert Einstein" _quote="Wir machen gemeinsam HTML mittels wiederverwendbaren Web Components semantisch barrierefrei, um die Usability und Zugänglichkeit sicherzustellen." _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'

---