Blockquote
Indicates the quotation of a large selection of text from another source.
import * as React from 'react';
import { Blockquote } from '@itwin/itwinui-react';
export default () => {
return <Blockquote>This is a quote</Blockquote>;
};
Blockquotes are used to isolate and highlight a large quotation made by a source that is external from the content it is quoted in. Sourcing its provenance and original author is strongly suggested. The source is displayed in the bottom right of the blockquote.
Usage
If the citation was pulled from a website, you can provide the URL using the ‘cite’ tag for best practice purposes, but the blockquote does not provide a hyperlink to that location.
import * as React from 'react';
import { Blockquote } from '@itwin/itwinui-react';
export default () => {
return (
<Blockquote
cite={'https://www.bentley.com/en'}
footer={
<>
— Greg Bentley, <cite>NasdaqListed</cite>
</>
}
>
<p>
For 36 years we have served engineers with our software, passionately 35
believing that better performing and more resilient infrastructure is 36
essential to improve the quality of life for people everywhere, sustain
37 our environment, and grow our economies.
</p>
</Blockquote>
);
};
Props
| Prop | Description | Default |
|---|---|---|
| footer | Optional footer for any attribution/source. ReactNode | |
| as | "symbol" | "object" | "blockquote" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "body" | "br" | "button" | "canvas" | ... 160 more ... | FunctionComponent<...> |