Documentation Playground
Skip to content
Docs

Blockquote

Block-level quotation from another source.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<.blockquote>
  Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
</.blockquote>

API Reference

This component is based on the blockquote element.

Prop Type Default Description
class string nil Additional CSS classes.
color string — Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
high_contrast boolean — Whether to increase color contrast with the background.
size string — Blockquote size (1-9). Responsive supported.
style string nil Additional inline styles.
truncate boolean — Whether to truncate text with ellipsis when it overflows.
weight string — Font weight: one of light, regular, medium, bold.
class Additional CSS classes.
Type string Default nil
color Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type string Default —
high_contrast Whether to increase color contrast with the background.
Type boolean Default —
size Blockquote size (1-9). Responsive supported.
Type string Default —
style Additional inline styles.
Type string Default nil
truncate Whether to truncate text with ellipsis when it overflows.
Type boolean Default —
weight Font weight: one of light, regular, medium, bold.
Type string Default —

Examples

Size

Use the size prop to control the size.

Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<.flex direction="column" gap="5">
  <.box max_width="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 max_width="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 max_width="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 max_width="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 max_width="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 max_width="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 max_width="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 max_width="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 max_width="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>

Weight

Use the weight prop to set the text weight.

Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<.flex direction="column" gap="3" max_width="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>

Color

Use the color prop to assign a specific color.

Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<.flex direction="column" gap="3" max_width="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>

High-contrast

Use the high_contrast prop to increase color contrast with the background.

Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<.flex direction="column" gap="3" max_width="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" high_contrast>
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
  </.blockquote>
</.flex>

Truncate

Use the truncate prop to truncate text with an ellipsis when it overflows its container.

Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
<.flex max_width="500px">
  <.blockquote truncate>
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
  </.blockquote>
</.flex>
← Heading Code →