QuoteBlock

A block of text with an indentation on the left side, symbolizing a quote.

Props

The same as Joy UI's Box component.

Examples

Quotes with paragraphs

This is normal text.

This is a quote block, without a paragraph directly surrounding it, so there is no margin to the text above.
Wrap a quote block in a nested paragraph for extra margins.
Text below the quote block

1<Paragraph body>
2  This is normal text.
3  <QuoteBlock>
4    This is a quote block, without a paragraph directly surrounding it, so there is no margin to the text above.
5    <Paragraph body>
6      <QuoteBlock>
7        Wrap a quote block in a nested paragraph for extra margins.
8      </QuoteBlock>
9    </Paragraph>
10    Text below the quote block
11  </QuoteBlock>
12</Paragraph>

1<Paragraph body>
2  This is normal text.
3  <QuoteBlock>
4    This is a quote block, without a paragraph directly surrounding it, so there is no margin to the text above.
5    <Paragraph body>
6      <QuoteBlock>
7        Wrap a quote block in a nested paragraph for extra margins.
8      </QuoteBlock>
9    </Paragraph>
10    Text below the quote block
11  </QuoteBlock>
12</Paragraph>

.css-1gf1up0{--Icon-fontSize:calc(1em * 1);margin:var(--Typography-margin, 0px);display:inline;font-size:var(--Typography-fontSize, inherit);display:inline;}.css-1gf1up0>.MuiTypography-endDecorator{display:none;}.css-1gf1up0:hover>.MuiTypography-endDecorator{display:inline;}QuoteBlock

Examples

Quotes with paragraphs

QuoteBlock