docs / patterns / pullquote

Pullquote

a centered quote in display weight, with an optional attribution tied to it and a decorative ornament slot above.

intensity · structuresrsc · server

provenance

shaped from personal-website

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

long-form prose, landing sections, a manifesto beat between blocksany decorative node in the ornament slot, KajoSphere includednot for testimonials in a grid. one quote per sectionno interactive content in the ornament, it is aria-hidden

a11y

attributed quotes render figure + figcaption · the ornament is aria-hiddenjest-axe
live demo · try it out
Beauty that stays usable.
usva, design principles
customize
childrenthe quote itself
attributionempty leaves a bare blockquote
ornamentdecorative flourish in the 80px slot
usagecopy
import { Pullquote } from "@usva-ui/react/patterns/pullquote";

<Pullquote
  attribution="usva, design principles"
>  Beauty that stays usable.
</Pullquote>

props

proptypedefaultnotes
childrenReactNode—the quote. rendered as a blockquote.
attributionReactNode—upgrades the wrapper to a figure and becomes its figcaption.
ornamentReactNode—decorative flourish above the quote, in a fixed 80px slot.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Pullquote } from "@usva-ui/react/patterns/pullquote";

<Pullquote attribution="usva, design principles">
  Beauty that stays usable.
</Pullquote>