UI Components
Editorial Pull Quote
A magazine-style pull quote with oversized quotation mark, elegant serif type, and rule lines.
by mcpskills
Framework
reacttailwind
UI Library
content
Difficultybeginner
English Prompt
Create a premium editorial pull quote component. Place it inside a wide article layout with body text columns on either side. The pull quote is set apart by thin vertical rules above and below, a very large faded quotation mark SVG as a background element, and elegant serif typography at a large size (2xl or 3xl). Use a warm neutral color palette (charcoal text, warm gray background). Add a small attribution line below the quote in uppercase tracking-widest sans-serif. The quote text can use hanging punctuation. Use no emojis, only SVG quotation mark. The overall feel should be like a high-end magazine or long-form publication.
Chinese Prompt
创建一个高级编辑式引用组件。将其放置在宽版文章布局中,两侧为正文栏。引用块通过上下细横线分隔,背景是一个极大的淡色引号 SVG 元素,引用文字使用优雅的大号衬线字体(2xl 或 3xl)。使用温暖的中性色调(炭色文字、暖灰色背景)。引用下方添加小写 attributon 行,使用大写 tracking-widest 无衬线字体。引用文字可使用悬挂标点。不使用 emoji,仅使用 SVG 引号。整体应呈现高端杂志或长篇出版物的感觉。

Magazine-style pull quote with oversized quotation mark and serif type.