Skip to content
Site volume
Colourway

Components

Quote

A quote with its source on its own line: inline with an ink rule, or a pull quote in the text family.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/quote
On this page

Example#

Look of this example
It answers the price question before anyone picks up the phone.
Jordan ReyesFernlight Garden Studio
Live render of examples/quote/basic.tsx

Usage#

Use a quote for words someone else said: a client testimonial, a line from an interview, a pull quote in a case study. It is a figure with the blockquote and a caption naming who said it.

  • inline (default) sits in running text with a 4 px ink rule at its start.
  • pull sets a short line larger in the text family (pull quotes never switch to display type), with a large quote mark as art outside the words.
  • The caption prints the name, their role or company and an optional avatar, on their own line, with no dash.
  • Speech in a comic is the comic kit's Balloon, not a quote.

Anatomy#

It answers the price question before anyone picks up the phone.
Jordan ReyesFernlight Garden Studio
The parts of examples/quote/basic.tsx, numbered:
  1. QuoteThe words, in body type with the ink rule..mk-quote-text
  2. Captiondata-mk-part="caption"

Volume#

Reading layer: the words are identical at every volume; a pull quote's mark is art and follows the volume.

  • Quiet

    It answers the price question before anyone picks up the phone.
    Jordan ReyesFernlight Garden Studio

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    It answers the price question before anyone picks up the phone.
    Jordan ReyesFernlight Garden Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    It answers the price question before anyone picks up the phone.
    Jordan ReyesFernlight Garden Studio

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    It answers the price question before anyone picks up the phone.
    Jordan ReyesFernlight Garden Studio

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Quote real people with permission, word for word; trim with "…", never rewrite (fictional names in these docs).
  • One to three sentences; the line that would make someone call.
  • The caption names the person and their business: "Jordan Reyes, Fernlight Garden Studio".

Do and don't#

Do

It answers the price question before anyone picks up the phone.
Jordan ReyesFernlight Garden Studio

Specific, attributed.

Don't

Amazing work, highly recommend!!!
A happy client

Anonymous and generic.

A quote is proof only when a reader can tell who said it and what changed for them.

Accessibility#

  • A figure with a blockquote and a figcaption; the pull quote's mark is art.

Props#

PropTypeDefaultDescription
variant"inline" | "pull"none
namestringnoneWho said it.
affiliationstringnoneTheir role, studio or place (printed under the name).
citestringnoneA source URL (the blockquote's `cite`).
avatarReactNodenoneAn image or `Avatar` (P1) beside the name.
children requiredReactNodenone

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from QuoteProps in packages/overprint-react/src/reading/quote/quote.tsx.

Tokens#

System tokens (8)

Scanned from its CSS at build and checked against its registry entry; 3 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry