Typography

Blockquote

Block-level quotation from another source.

Blockquote quotes another source as a block. It renders a native blockquote element, which conveys quotation semantics to assistive technology.

Blockquote: Basic

Open in playground

This passage is set apart from the surrounding text because it comes from another source.

import { Blockquote } from '@luke-ui/react/blockquote';

export default () => {
	return (
		<Blockquote>
			This passage is set apart from the surrounding text because it comes from another source.
		</Blockquote>
	);
};

Blockquote: Basic

Loading Blockquote: Basic example

Typography

Blockquote accepts the typography, fontWeight, and lineClamp props from Text. Pass typography when the quotation needs a different style from the default.

Blockquote: Typography

Open in playground

A quoted passage set at the lead size.

import { Blockquote } from '@luke-ui/react/blockquote';

export default () => {
	return <Blockquote typography="lead">A quoted passage set at the lead size.</Blockquote>;
};

Blockquote: Typography

Loading Blockquote: Typography example

API

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

Name	Type	Default
fontStyle	"default" \|⁠ "inherit" \|⁠ "italic" \|⁠ "normal" \|⁠ undefined	`'default'`
Sets font style.
fontVariantNumeric	"default" \|⁠ "diagonal-fractions" \|⁠ "normal" \|⁠ "ordinal" \|⁠ "slashed-zero" \|⁠ "tabular-nums" \|⁠ undefined	`'default'`
Sets numeric glyph style.
fontWeight	"body" \|⁠ "emphasis" \|⁠ "heading" \|⁠ "label" \|⁠ undefined	—
Sets the semantic font-weight role. When omitted, the selected typography style supplies its weight.
isVisuallyHidden	boolean	`false`
Hides text visually while keeping it accessible.
lineClamp	1 \|⁠ 2 \|⁠ 3 \|⁠ 4 \|⁠ 5 \|⁠ boolean \|⁠ undefined	—
Clamps text lines. `true` clamps to 1 line; numeric values clamp to 1–5.
shouldDisableTrim	boolean \|⁠ undefined	—
Turns cap-height trim on or off. When omitted, trimming is disabled for inline or unknown element types. Line clamp always disables trim.
shouldInheritFont	boolean \|⁠ undefined	`false`
Makes text inherit its surrounding font styles. Colour always inherits unless `color` is set.
textAlign	"center" \|⁠ "end" \|⁠ "start" \|⁠ undefined	`'start'`
Sets text alignment.
textDecoration	"inherit" \|⁠ "line-through" \|⁠ "none" \|⁠ "underline" \|⁠ undefined	`'none'`
Sets text decoration.
textTransform	"capitalize" \|⁠ "default" \|⁠ "inherit" \|⁠ "lowercase" \|⁠ "none" \|⁠ "uppercase" \|⁠ undefined	`'none'`
Sets text transform.
textWrap	"balance" \|⁠ "default" \|⁠ "pretty" \|⁠ undefined	`'default'`
Sets text wrapping behavior.
typography	"body" \|⁠ "caption" \|⁠ "display" \|⁠ "heading1" \|⁠ "heading2" \|⁠ "heading3" \|⁠ "heading4" \|⁠ "label" \|⁠ "lead" \|⁠ undefined	`'body'`
Applies a complete typography style: family, size, weight, line height, letter spacing, and trim.