Quote wird bevorzugt auf dem Server gerendert. Nutze den Standard-Import (z. B. @prokodo/ui/quote) — die Library erkennt die Umgebung automatisch.
Quote
Quote rendert ein semantisch korrektes <blockquote> mit optionaler Autorenangabe und dekorativem Akzent. Häufige Einsatzzwecke sind Testimonials, Pull-Quotes und zitierte Passagen.
Übersicht
import { Quote } from "@prokodo/ui/quote"
;<Quote
text="prokodo UI saved us weeks of development time."
author="Jane Doe"
role="CTO, Acme Corp"
/>
Import
import { Quote } from "@prokodo/ui/quote"
CSS:
import "@prokodo/ui/quote.css"
Props
| Prop | Typ | Standard | Pflicht | Beschreibung |
|---|---|---|---|---|
text | string | — | ✅ | The quote body text. |
author | string | — | — | Attribution name. |
role | string | — | — | Author's role/title shown beneath the name. |
variant | "default" | "large" | "minimal" | "default" | — | Visual style variant. |
className | string | — | — | CSS class on root <blockquote>. |
Siehe
src/components/quote/Quote.model.tsfür den vollständigenQuoteProps-Typ.
Design-Tokens
Quote definiert keine komponentenspezifischen CSS Custom Properties. Passe das Erscheinungsbild an, indem du folgende globale Design-System-Tokens auf :root oder einem übergeordneten Element überschreibst:
| Token | Beschreibung |
|---|---|
--pk-space-lg | Unterer Abstand der Überschrift und Avatar-Rand |
--pk-space-xs | Oberes Padding der Autorenposition |
--pk-color-fg | Textfarbe des Autorennamens |
--pk-color-muted | Textfarbe der Autorenposition |
color-Prop: Wirkt jetzt auf Unterüberschrift, Avatar, sowie auf Rahmenfarbe und Hintergrundton der Karte. Alle visuellen Elemente reagieren konsistent auf ein einzigescolor-Token.
WCAG-2.2-Status
| Kriterium | Bezeichnung | Status | Hinweis |
|---|---|---|---|
| 1.3.1 | Info und Beziehungen (A) | ✅ Erfüllt | Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden. |
| 1.3.2 | Bedeutungsvolle Reihenfolge (A) | 🔍 Manuell prüfen | Die Lesereihenfolge im DOM muss der beabsichtigten visuellen Darstellungsreihenfolge entsprechen. |
| 1.4.3 | Kontrast (Minimum) (AA) | 🔍 Manuell prüfen | Text benötigt ein Kontrastverhältnis von mindestens 4,5:1 (3:1 für großen Text). Prüfung im finalen Produkt-Theme erforderlich. |
| 2.4.6 | Überschriften und Bezeichnungen (AA) | 🔍 Manuell prüfen | Überschriften und Labels müssen das Thema oder den Zweck des zugehörigen Inhalts beschreiben. |
| 4.1.2 | Name, Rolle, Wert (A) | 🔍 Manuell prüfen | Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein. |
Testabdeckung: 3 jest-axe-Assertion(s) in 1 Testdatei(en) · 0 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.