Components / Blockquote

Blockquote

Editorial quotation primitive: a semantic <blockquote> anchored by an oversized decorative quote mark (pull-quote style), with an optional attribution footer. No left rule — the glyph carries the emphasis.

typographyv0.8.0

Playground

Examples

Accent

Design tokens are the contract between design and code.Cognivo docs

<cg-blockquote variant="accent">Design tokens are the contract between design and code.<span slot="footer">Cognivo docs</span></cg-blockquote>

Muted card

Think in systems, not screens.Design principles

<cg-blockquote variant="muted">Think in systems, not screens.<span slot="footer">Design principles</span></cg-blockquote>

Default

Every spacing value should come from the token scale.

<cg-blockquote>Every spacing value should come from the token scale.</cg-blockquote>

Import

import { CgBlockquote } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-blockquote';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`cite`	string	""	Source URL (blockquote cite)
`variant`	"default" \| "accent" \| "muted"	"default"	default = neutral glyph; accent = brand-colored glyph + larger type; muted = soft filled card