[Library] Editorial

Catalogue accessStandard

Quote break

A reading column broken by one quotation: two hairlines run wider than the measure and between them the line is set at display size, with its source on a short rule beneath, before the prose resumes at its own width. States no colour and no font of its own.

View
Before you copy

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A reading column broken by one quotation. Two hairlines run wider than the column, and between them the line is set at display size with its source on a short rule beneath, before the prose resumes at its own width. core/group, core/paragraph and core/separator only.

The signature moment

The rules run past the column

The prose is a 36rem column. The quotation is a 62rem alignwide group whose first and last blocks are wide separators, so two lines of currentColor cut across the page well outside the text they interrupt, and the quotation sits between them at up to 52px. It is the structural-mark signature: the rules are what tell a reader that this is a break in the article and not a paragraph that got loud. The source line repeats the device at small scale, a 3rem rule beside 14px uppercase.

This is deliberately not core/quote. The quote block takes its border, its italic and its padding from the theme, and each of the stock themes does something different with it; a break that is sometimes italic, sometimes bordered and sometimes neither is not one design. Paragraphs with explicit proportion are the same design everywhere, and the quotation marks are typed.

What it inherits from your theme

  • Typeface. None stated. A serif theme will set the quotation in its serif, which is how pull quotes in print work; a sans theme gets a sans.
  • Palette. base ground, contrast text, two-rung chains. The quotation carries its colour explicitly, because at display size it is the heading of this section in everything but tag.
  • Every rule. Three core/separator blocks stating no colour.
  • Spacing rhythm. Core spacing presets.

What it decides for itself

  • The widths: 36rem and 62rem, in rem.
  • The quotation: clamp(1.75rem, 3.6vw, 3.25rem), weight 600, -0.03em, line-height 1.1. Not italic; the rules and the size do the work.
  • The short rule: 3rem, fixed.
  • Body proportion: clamp(1.0625rem, 1.45vw, 1.25rem) on 1.75.

What you change first

  1. The quotation. Under 90 characters, with its own quotation marks.
  2. The source. One line, under about 22 characters, uppercase.
  3. The copy. Two paragraphs either side. Keep at least one paragraph after the break, or it is a closing quote and not a break.
How the widths work66 words

The band is constrained at contentSize: 36rem, wideSize: 62rem. The prose takes the content width, the quotation group takes the wide width, both centred, so they share a centre line and the rules overhang the column by 13rem each side. The short rule under the quotation is a separator inside a flexWrap: nowrap flex group with layout.selfStretch: fixed at 3rem; its neighbour is the source label.

What happens at 39086 words

Column and quotation group are both the width of the phone. The quotation floors at 28px on 1.1, which for a line of this length is four to five lines: keep a replacement under about 90 characters. The source row stays a row; the 3rem rule and the label fit side by side at 14px up to about 22 characters of label; the first draft's 26-character placeholder wrapped (measured 2026-08-21). The wide rules become full-width rules, which is what a break looks like on a phone.

Contrast24 words

Every pair is contrast on base. The quotation is large text at 3:1; body and source are held to 4.5:1. Rules carry no text.

Display type18 words

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(1.75rem, 3.6vw, 3.25rem)
Back to the library