Blockquote
Indicates the quotation of a large selection of text from another source.
This is a quote
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.
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.
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<...> |