Skip to main content

BlockQuote

A simple wrapper that returns React.Children in a blockquote element.

Quotation marks do not need to be used in the given quote as these get applied automatically based on the number of child elements and the lang attribute of the documents html element.

Examples

BlockQuote

View standalone

By default, standard open and close quotation marks (“ ”) are applied.

Simple BlockQuote with plain text:

Practice makes perfect

Complex BlockQuote with block and inline elements:

What doesn't kill you makes you stronger

When life gives you lemons, make lemonade

I think, therefore I am

Code
<Stack gap="16px">
  <Text>
    Simple BlockQuote with plain text:
  </Text>
  <BlockQuote>
    Practice makes perfect
  </BlockQuote>
  <Text>
    Complex BlockQuote with block and inline elements:
  </Text>
  <BlockQuote>
    <p>
      What doesn't kill you makes you{' '}
      <b>
        stronger
      </b>
    </p>
    <p>
      When life gives you lemons, make lemonade
    </p>
    <p>
      I think, therefore{' '}
      <u>
        I am
      </u>
    </p>
  </BlockQuote>
</Stack>

French BlockQuote

View standalone

When the lang attribute of the page is fr, guillemet quotation marks (« ») are applied.

Mieux vaut prévenir que guérir

Code
<div lang="fr">
  <BlockQuote>
    Mieux vaut prévenir que guérir
  </BlockQuote>
</div>

Japanese BlockQuote

View standalone

When the lang attribute of the page is ja, kagikakko quotation marks (「 」) are applied.

七転び八起き

Code
<div lang="ja">
  <BlockQuote>
    七転び八起き
  </BlockQuote>
</div>

Props