Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Blockquote

Version 1.0.0GithubStorybook

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

Installation

Installation page anchor
yarn add @twilio-paste/blockquote - or - yarn add @twilio-paste/core

Usage

Usage page anchor
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>
  );
};

Props

Props page anchor

Blockquote

Blockquote page anchor

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

BlockquoteContent

BlockquoteContent page anchor

element

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

Type
string
Default
'BLOCKQUOTE_CONTENT'

BlockquoteCitation

BlockquoteCitation page anchor

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