Blockquote
Elevate your React applications with a customizable Blockquote component. Effortlessly display quotes, testimonials, or excerpts in a visually appealing and semantically correct manner.
Components:
Blockquote BlockquoteCite
Type
Components
import
import { Blockquote } from '@pillar-ui/core'Usage
import { Blockquote } from '@pillar-ui/core'<Blockquote />Examples
Corner
Default
2
Type
'0' | '1' | '2' | '3' | '4' | '5' | 'full'
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
import { Blockquote } from '@pillar-ui/core'
export const BlockquoteCorner = () => {
return (
<>
<Blockquote corner="0" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="1" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="2" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="3" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="4" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="5" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="full" cite="John Doe">
This is the quoted text.
</Blockquote>
</>
)
}Color
Default
p
Type
'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
import { Blockquote } from '@pillar-ui/core'
export const BlockquoteColor = () => {
return (
<>
<Blockquote color="d" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote color="w" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote color="su" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote color="p" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote color="se" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote color="b" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote color="i" cite="John Doe">
This is the quoted text.
</Blockquote>
</>
)
}Size
Default
5
Type
'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
This is the quoted text.
import { Blockquote } from '@pillar-ui/core'
export const BlockquoteSize = () => {
return (
<>
<Blockquote size="1" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="2" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="3" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="4" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="5" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="6" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="7" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="8" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="9" cite="John Doe">
This is the quoted text.
</Blockquote>
</>
)
}Cite
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe? Repellat libero quibusdam repellendus quisquam?Hamza Miloud Amar
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe? Repellat libero quibusdam repellendus quisquam?Hamza Miloud Amar
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe? Repellat libero quibusdam repellendus quisquam?Hamza Miloud Amar
import { Blockquote, Text } from '@pillar-ui/core'
export const BlockquoteCite = () => {
return (
<div className="Sf-4">
<Blockquote color="d">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
Repellat libero quibusdam repellendus quisquam?
<Text as="cite">Hamza Miloud Amar</Text>
</Blockquote>
<Blockquote color="d">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
Repellat libero quibusdam repellendus quisquam?
<Text as="cite" align="center">
Hamza Miloud Amar
</Text>
</Blockquote>
<Blockquote color="d">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro corporis autem minima animi, sequi
exercitationem fugit mollitia ducimus consequatur praesentium, inventore laudantium ullam aliquam saepe?
Repellat libero quibusdam repellendus quisquam?
<Text as="cite" align="end">
Hamza Miloud Amar
</Text>
</Blockquote>
</div>
)
}Icons
This is the quoted text.
This is the quoted text.
import { Blockquote } from '@pillar-ui/core'
import { Quotes } from '@pillar-ui/icons'
export const BlockquoteIcon = () => {
return (
<>
<Blockquote cite="John Doe">This is the quoted text.</Blockquote>
<Blockquote icon={<Quotes />} cite="John Doe">
This is the quoted text.
</Blockquote>
</>
)
}Customizing Appearance
Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.
Available Properties:
/* Change the default corner of the Blockquote */
--blockquote-rad:;
/* Change the default size of the Blockquote */
--blockquote-size:;