If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
Usage
import { Blockquote } from "chakra-ui-solid";<Blockquote.Root>
<Blockquote.Content cite="https://" />
<Blockquote.Caption>
<cite>Uzumaki Naruto</cite>
</Blockquote.Caption>
</Blockquote.Root>If you prefer a closed component composition, check out the snippet below.
Examples
With Cite
To provide reference about the blockquote:
- pass the
citeprop toBlockquote.Contentpointing to the quote url - render the
Blockquote.Captioncomponent to display name of quote author
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
Colors
Use the colorPalette prop to change the color of the blockquote.
gray
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions.
red
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions.
green
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions.
blue
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions.
teal
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions.
pink
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions.
purple
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions.
cyan
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions.
orange
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions.
yellow
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions.
Variants
Use the variant prop to change the visual style of the blockquote.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
Icon
Here’s an example of how to compose the Float and Blockquote.Icon to show an icon on the
blockquote. The default icon is a double quote.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
Alternatively, you can render a custom icon.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
Justify
Use the justify prop to change the alignment of the blockquote.
start
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
center
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
end
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
With Avatar
Here’s an example of how to compose the Blockquote, Avatar and Float components to create a
stunning testimonial component.
If anyone thinks he is something when he is nothing, he deceives himself. Each one should test his own actions. Then he can take pride in himself, without comparing himself to anyone else.
Closed Component
Here’s an example of how to create a closed component composition
If anyone thinks he is something when he is nothing, he deceives himself.
Props
Root
| Prop | Default | Type |
|---|---|---|
justify | 'start' | ConditionalValue<'start' | 'center' | 'end' | PresetVariant<'blockquote', 'justify'>>Which edge the quote and its caption line up against, and how the text is aligned. |
variant | 'subtle' | ConditionalValue<'subtle' | 'solid' | 'plain' | PresetVariant<'blockquote', 'variant'>>The rule down the leading edge — `subtle` draws it in the muted palette step, `solid` in the solid one, and `plain` leaves the padding without the rule. |
Plus HTMLChakraProps<"figure"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.