Usage

Start with these tokens when customizing quotes:

--quote-border-color, --quote-border-width, and --quote-background for block quote emphasis

--quote-font-style and --quote-font-size for typographic tone

--quote-padding and --quote-spacing for rhythm and inset

--quote-inline-font-style and --quote-inline-quotes for inline quote treatment

Inline quotes inherit surrounding typography by default; use --quote-inline-quotes only when you need custom marks or to suppress them.

Tokens

Block Quote Tokens

Visual styling controls for block quotes, including borders, backgrounds, and spacing.

Token	Description	Default Value
`--quote-block-max-width`	Max width for quote blocks (breakout layout)	`var(--content-breakout-width)`
`--quote-block-max-width-mobile`	Max width on mobile (640px)	`var(--content-breakout-width-mobile)`
`--quote-block-max-width-print`	Max width for print	`100%`
`--quote-border-width`	Left border thickness for emphasis	`3px`
`--quote-border-color`	Left border color	`var(--border-color-emphasis)`
`--quote-border-color-dark`	Border color for dark mode	`var(--border-color-emphasis-dark)`
`--quote-border-radius`	Corner rounding for quote background	`var(--border-radius-default)`
`--quote-background`	Background color	`var(--surface-sunken)`
`--quote-background-dark`	Background color for dark mode	`var(--surface-sunken-dark)`
`--quote-spacing`	Vertical spacing (top and bottom margins)	`var(--content-spacing)`
`--quote-padding`	Internal padding around quote content (responsive)	`calc(var(--content-spacing) * 0.5)`
`--quote-spacing-horizontal`	Left and right margins (responsive)	`calc(var(--content-spacing) * 0.75)`
`--quote-spacing-horizontal-mobile`	Left and right margins on mobile (full-width)	`0`
`--quote-font-style`	Font style for quoted text	`italic`
`--quote-font-size`	Font size for block quotes (responsive)	`calc(var(--text-font-size) * 1.125)`

Inline Quote Tokens

Styling controls specifically for inline quotes within text flow.

Token	Description	Default Value
`--quote-inline-font-style`	Font style for inline quotes	`inherit`
`--quote-inline-quotes`	Quote marks (`quotes` CSS property)	`auto`

Examples

Default Block Quotes

Standard block quote styling with automatic responsive spacing and dark mode support:

:root {
  /* No design token overrides */
}

This is a default block quote that demonstrates the base visual styling. Block quotes automatically receive a colored left border, subtle background, italic typography, and larger font size to distinguish them from regular paragraph text.
The spacing and colors automatically adapt to different screen sizes and dark mode preferences through semantic token integration.

Minimal Block Quotes

Simplified block quotes with reduced visual emphasis:

:root {
  --quote-background: transparent;
  --quote-border-width: 0;
  --quote-padding: var(--space-2);
  --quote-font-size: inherit;
}

This quote uses minimal styling with no background, no border, reduced padding, and standard font size. Visual distinction comes only from italic styling and slight indentation.

Academic Paper Block Quotes

Enhanced quotes for scholarly documents with increased emphasis:

:root {
  --quote-padding: var(--space-6);
  --quote-spacing-horizontal: var(--content-spacing);
  --quote-font-size: var(--font-size-xl);
  --quote-border-width: 6px;
}

This is an academic-style quote with increased padding, larger margins, bigger font size, and thicker border. The enhanced spacing and typography create stronger visual hierarchy appropriate for scholarly documents.

Colored Block Quotes

Custom border colors for different quote types:

:root {
  --quote-border-color: var(--color-accent);
  --quote-border-radius: 0;
}

This quote uses the theme's accent color for the border and removes the rounded corners for a more geometric appearance. The semantic color token ensures automatic dark mode support while maintaining the visual emphasis.

Inline Quotes

Inline quotes can be customized while maintaining their integration within text flow:

Default styling (browser defaults):

:root {
  --quote-inline-font-style: inherit;
  --quote-inline-quotes: auto;
}

Default inline quotes: To be or not to be use browser quotation marks and inherit font styling from surrounding text.

Italic emphasis:

:root {
  --quote-inline-font-style: italic;
}

Italic inline quotes: I have a dream receive italic emphasis while maintaining text flow.

Custom quotation marks:

:root {
  --quote-inline-quotes: "«" "»" "‹" "›"; /* French guillemets */
}

Custom quotes: One small step for man use French-style guillemet quotation marks.

No quotation marks:

:root {
  --quote-inline-quotes: none;
  --quote-inline-font-style: italic;
}

Minimal inline quotes: Never memorize something that you can look up use only italic styling without visible quotation marks.