Pull Quote
Pull quote with attribution. Pro · Content and social › Article
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add pull-quotenpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { PullQuote } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
children * | ReactNode | The quoted words, without quotation marks. | |
author | ReactNode | Who said it. | |
source | ReactNode | The speaker's role or where it was said: "CEO of Acme", "at the press conference". | |
cite | string | URL of the quoted source (the blockquote's cite). | |
variant | 'mark' | 'rule' | 'plain' | 'mark' | rule: a bar along the start edge; mark: a large quotation mark above (default); plain: neither. |
align | 'center' | 'start' | 'end' | 'center' | center sets the quote apart between paragraphs; start / end float it beside the text on wide screens. |
Related components
- Article Header — Article header: section, headline, lede, authors and date
- Byline — Byline: authors, published and updated dates, reading time
- Article Figure — Image with caption and photo credit
- Key Points — “Key points” summary block
- Editor Note — Update, correction, disclosure and sponsored-content notes
- Article Toc — Article table of contents that tracks the current section
- Reading Progress — Reading progress bar
- Share Bar — Share: Telegram, VK, X, WhatsApp, email and copy link
- Author Bio — Author card at the end of an article, with a follow button
- Article Card — News card: vertical, horizontal and over a photo
- Live Blog — Live blog: update feed, pinned and key events
- Breaking News — “Breaking” banner with rotating headlines
Previous: Article Figure · Next: Key Points · All Content and social