Paste assistant Assistant
Figma
Star

Blockquote

A Blockquote is a stylized text wrapper for a quotation and source.

yarn add @twilio-paste/blockquote - or - yarn add @twilio-paste/core
import { Blockquote, BlockquoteContent, BlockquoteCitation } from '@twilio-paste/core/blockquote';

const BlockquoteExample = () => {
  return (
    <Blockquote url="#">
      <BlockquoteContent>
        With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the
        human experience as a whole.
      </BlockquoteContent>
      <BlockquoteCitation author="Google" source="People + AI Guidebook" />
    </Blockquote>
  );
};

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'BLOCKQUOTE'

marginBottom

Remove the bottom margin

Type
"space0" | "space70"

url

The URL to the source of the quote

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'BLOCKQUOTE_CONTENT'

author RequiredRequired

The author of the quote

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'BLOCKQUOTE_CITATION'

source

The source of the quote

Type
string

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.