Pillar UI React Blockquote Component documentation
Elevate your React applications with a customizable Blockquote component. Effortlessly display quotes, testimonials, or excerpts in a visually appealing and semantically correct manner.
Components:
Type
import
import { Pillar UI React Blockquote Component } from '@pillar-ui/core'
Props
The Blockquote component is a versatile co mponent used to display quoted text with an optional citation. It allows you to customize various aspects of the blockquote, including color, size, corner style, and more.
Corner
Type: string
Default: md
Options: sharp
| xs
| sm
| md
| lg
| circle
| full
The size prop determines the corners of the Blockquote. It accepts any of the Size types defined in our library see options above. If not provided, it defaults to the md size.
The corner prop determines the border radius of the Blockquote. It accepts any of the Corner types defined in your library, including (sharp, xs, sm, md, xl, full, circle), and pill. If not provided, it defaults to the square corner.
Example usage:
”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.
function CornerCorners() {
return (
<div className="l_f-md">
<Blockquote corner="sharp" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="xs" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="sm" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="md" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="lg" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="xl" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote corner="full" cite="John Doe">
This is the quoted text.
</Blockquote>
</div>
)
}
Color
Type: Color (string)
Default: primary
Options: danger
| warning
| success
| primary
| secondary
| bg
You can customize the color of the blockquote by passing a color prop to the Blockquote component.
”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'
function BlockquoteColor() {
return (
<div className="l_f-md">
<Blockquote color="dan" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote color="war" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote color="suc" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote color="pri" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote color="sec" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote color="bg" cite="John Doe">
This is the quoted text.
</Blockquote>
</div>
)
}
Size
Type: Size (string)
Default: md
Options: 2xs
| xs
| sm
| md
| lg
| xl
| 2xl
You can customize the size of the blockquote by passing a size prop to the Blockquote component.
”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'
function BlockquoteSize() {
return (
<div className="l_f-md">
<Blockquote size="2xs" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="xs" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="sm" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="md" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="lg" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="xl" cite="John Doe">
This is the quoted text.
</Blockquote>
<Blockquote size="2xl" cite="John Doe">
This is the quoted text.
</Blockquote>
</div>
)
}
Cite
The Blockquote.Cite
subcomponent is a specialized element for attributing the quoted content to its source.
title
(string): The text of the citation (e.g., author name, source title).align
(start
|center
|end
) defaultstart
: Controls the horizontal alignment of the citation (start
,center
, orend
; default isstart
).
** Example Usage **
”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?Hello world
”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?Hello world
”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?Hello world
import { Blockquote } from '@pillar-ui/core'
function BlockquoteCite() {
return (
<div className="l_f-md">
<Blockquote color="dan">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
{/* ... other text ... */}
<Blockquote.Cite title="Hello world" />
</Blockquote>
{/* ... other examples with alignment */}
</div>
)
}
Use Case
The blockquote
component is designed to create stylish and customizable blockquote elements in your web applications. It's useful for emphasizing quoted content in an elegant manner.
Troubleshooting
If you encounter any issues or have questions related to the blockquote
component, please refer to the documentation or seek assistance on the project's GitHub repository.