Patterns
Pull Quote
A centered manifesto quote in large gradient display text, with a soft quote glyph.
A centered manifesto or pull-quote: a soft quote glyph over one large line of display text that fades from the foreground into the muted tone.
Extracted verbatim from Yunxin's Fellows manifesto. The gradient text is the point — a flat colour at this size reads as a heading, not a statement.
Import
tsx
1import { PullQuote } from "@yuhuanowo/yunui/patterns";Basic
Manifesto
We would rather ship one screen that feels considered than ten that feel generated.
With attribution
With cite
Credits are the cheap part. Attention is what we are actually giving you.
Without the glyph
Set showIcon={false} when the quote sits under a heading that already frames it.
Props
PullQuote also forwards any HTML attributes to the <figure>.
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | The quoted line — a manifesto, an ethos, a testimonial. |
| cite | ReactNode | — | Attribution shown under the quote. |
| showIcon | boolean | true | Show the leading quote glyph. |