Typography

Quote

Short inline quotation.

Quote marks a short quotation inside a sentence. It renders a native q element, which conveys quotation semantics to assistive technology and receives the browser's own quotation marks.

Quote: Basic

Open in playground

A short phrase can appear as quoted material within a sentence.

import { Quote } from '@luke-ui/react/quote';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Text>
			A short phrase can appear as <Quote>quoted material</Quote> within a sentence.
		</Text>
	);
};

Quote: Basic

Loading Quote: Basic example

Quote stays inline and inherits the surrounding typography. Use textWrap to control wrapping. Use lineClamp to constrain a longer quotation. Use cite to give the source URL.

API

QuoteProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type	Default
cite	string \|⁠ undefined	—
URL of the quoted source.
lineClamp	1 \|⁠ 2 \|⁠ 3 \|⁠ 4 \|⁠ 5 \|⁠ boolean \|⁠ undefined	—
Clamps text lines. `true` clamps to 1 line; numeric values clamp to 1–5.
textWrap	"balance" \|⁠ "default" \|⁠ "pretty" \|⁠ undefined	`'default'`
Sets text wrapping behavior.