Quote is best rendered on the server. Use the standard import (e.g. @prokodo/ui/quote) — the library detects the runtime automatically.
Quote
Quote renders a semantically correct <blockquote> with optional author attribution and a decorative accent. Common use cases include testimonials, pull-quotes, and cited passages.
Overview
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 | Type | Default | Required | Description |
|---|---|---|---|---|
content | string | — | ✅ | Quote body text. |
author | QuoteAuthor | — | — | Author info: { avatar?: ImageProps, name: string, position?: string }. |
title | QuoteHeadline | — | — | Optional headline above the quote. |
subTitle | string | — | — | Sub-headline text. |
color | Variants | — | — | Accent color variant. |
className | string | — | — | CSS class on root element. |
See
src/components/quote/Quote.model.tsfor the fullQuotePropstype.
Design Tokens
Quote does not define component-specific CSS custom properties. Override appearance by customising the following global design-system tokens on :root or a scoped ancestor:
| Token | Description |
|---|---|
--pk-space-lg | Headline bottom padding and avatar margin |
--pk-space-xs | Author position top padding |
--pk-color-fg | Author name text color |
--pk-color-muted | Author position text color |
colorprop: Applies to the sub-headline, avatar, and now also to the card's border colour and background tint. All visual elements respond consistently to a singlecolortoken.
WCAG 2.2 Status
| Criterion | Name | Status | Note |
|---|---|---|---|
| 1.3.1 | Info and Relationships (A) | ✅ Fulfilled | Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA. |
| 1.3.2 | Meaningful Sequence (A) | 🔍 Manual review | Content reading order in the DOM must match the intended visual presentation order. |
| 1.4.3 | Contrast (Minimum) (AA) | 🔍 Manual review | Text must have a contrast ratio of at least 4.5:1 (3:1 for large text). Verify against the final product theme. |
| 2.4.6 | Headings and Labels (AA) | 🔍 Manual review | Headings and labels must describe the topic or purpose of their associated content. |
| 4.1.2 | Name, Role, Value (A) | 🔍 Manual review | Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA. |
Test coverage: 3 jest-axe assertion(s) across 1 test file(s) · 0 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.