Blockquote
The Blockquote component is used to display a quote with its citation. It is composed of BlockquoteText, BlockquoteFooter, and BlockquoteCitation subcomponents.
"Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit"
Importing
To use the Blockquote components, you need to import the following components from the @ef-global/backpack package:
_10import {_10 Blockquote,_10 BlockquoteText,_10 BlockquoteCitation,_10 BlockquoteFooter,_10} from '@ef-global/backpack/Blockquote';
Usage
_10<Blockquote inverse={OPTIONAL_BOOLEAN}>_10 <BlockquoteText>_10 {/* Your quote text here */}_10 </BlockquoteText>_10 <BlockquoteFooter>_10 <BlockquoteCitation>_10 {/* Your citation text here */}_10 </BlockquoteCitation>_10 </BlockquoteFooter>_10</Blockquote>
Props
| Prop | Type | Description |
| inverse | boolean | Optional boolean to apply an inverse theme to the component. |
BlockquoteText
The BlockquoteText component is used to display the quote text inside the Blockquote component.
Usage
_10<BlockquoteText>_10 {/* Your quote text here */}_10</BlockquoteText>
Props
| Prop | Type | Description |
| className | string | Optional custom CSS class to be applied to the component. |
BlockquoteFooter
The BlockquoteFooter component is used to display the citation footer inside the Blockquote component.
Usage
_10<BlockquoteFooter>_10 {/* Your footer content here */}_10</BlockquoteFooter>
Props
| Prop | Type | Description |
| className | string | Optional custom CSS class to be applied to the component. |
BlockquoteCitation
The BlockquoteCitation component is used to display the citation text inside the BlockquoteFooter component.
Usage
_10<BlockquoteCitation>_10 {/* Your citation text here */}_10</BlockquoteCitation>
Props
| Prop | Type | Description |
| className | string | Optional custom CSS class to be applied to the component. |
Examples
Default Blockquote
"Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit"
_10<Blockquote>_10 <BlockquoteText>_10 "Cras mattis consectetur purus sit amet fermentum. Etiam porta sem_10 malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur_10 adipiscing elit"_10 </BlockquoteText>_10 <BlockquoteFooter>_10 <BlockquoteCitation>Albert Einstein</BlockquoteCitation>_10 </BlockquoteFooter>_10</Blockquote>
Inverse Blockquote
"Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit"
_10<Blockquote inverse>_10 <BlockquoteText>_10 "Cras mattis consectetur purus sit amet fermentum. Etiam porta sem_10 malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur_10 adipiscing elit"_10 </BlockquoteText>_10 <BlockquoteFooter>_10 <BlockquoteCitation>Albert Einstein</BlockquoteCitation>_10 </BlockquoteFooter>_10</Blockquote>