Quote

Voice · src/components/Quote/Quote.tsx

Somebody else's words, attributed.

A figure with a real blockquote and figcaption, not styled paragraphs: the attribution is structurally tied to the quotation, which is what lets a reader in a screen reader tell where the quote ends and who said it.

The margins are zeroed inline because a figure and a blockquote both arrive with browser margins that would fight the layout this sits in.

Import

import { Quote } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
lang	string	Language of the quotation, so it sets in the right voice face.
cite	React.ReactNode	Who said it. Omit it and there is no attribution line at all.
role	React.ReactNode	Their role or company, under the name.
rule	boolean	false drops the rule beside the quotation, for a quote already inside a bordered panel.
className	string
children	React.ReactNode