data/themes/docs/components/blockquote.mdx
<Blockquote>
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
This component is based on the blockquote element and supports common margin props.
Use the size prop to control the size.
<Flex direction="column" gap="5">
<Box maxWidth="300px">
<Blockquote size="1">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="350px">
<Blockquote size="2">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="400px">
<Blockquote size="3">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="450px">
<Blockquote size="4">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="500px">
<Blockquote size="5">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="550px">
<Blockquote size="6">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="600px">
<Blockquote size="7">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="650px">
<Blockquote size="8">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
<Box maxWidth="1000px">
<Blockquote size="9">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Box>
</Flex>
Use the weight prop to set the text weight.
<Flex direction="column" gap="3" maxWidth="500px">
<Blockquote weight="regular">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote weight="medium">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote weight="bold">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Flex>
Use the color prop to assign a specific color.
<Flex direction="column" gap="3" maxWidth="500px">
<Blockquote color="indigo">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote color="cyan">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote color="orange">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote color="crimson">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Flex>
Use the highContrast prop to increase color contrast with the background.
<Flex direction="column" gap="3" maxWidth="500px">
<Blockquote color="gray">
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
<Blockquote color="gray" highContrast>
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Flex>
Use the truncate prop to truncate text with an ellipsis when it overflows its container.
<Flex maxWidth="500px">
<Blockquote truncate>
Perfect typography is certainly the most elusive of all arts. Sculpture in
stone alone comes near it in obstinacy.
</Blockquote>
</Flex>