# 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.

Canonical: https://patternpaste.com/pattern/quote-break.html
Section: Editorial
Access: Free, and free to keep.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: group, paragraph, separator
Keywords: editorial, article, pull quote, quotation, long-form, break

## Variations (3)

### Quote break (the default)

Identical markup in every theme.

### Folio

This variation states its own colours and states its own type: identical in every theme.

The Folio set’s client line on bone: the architect’s words in Helvetica at display size between graphite hairlines, a safelight source rule and a mono attribution, Ada’s account of the shoot around it.

### Vow

This variation states its own colours and states its own type: identical in every theme.

The Vow wedding set: a wisteria band, the best man’s line in Didot italic between dusk hairlines, a peony source rule and label, the speech around it in Gill Sans.


---

## 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.

## How the widths work

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 390

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.

## 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.

## Contrast

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 type

Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(1.75rem, 3.6vw, 3.25rem)