# Blockquote

Block-level quotation from another source.

```jsx
<Blockquote>
  Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near
  it in obstinacy.
</Blockquote>
```

## [API Reference](#api-reference)

This component is based on the `blockquote` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop           | Type                                                      | Default          |
| -------------- | --------------------------------------------------------- | ---------------- |
| `asChild`      | `boolean`                                                 | No default value |
| `size`         | `Responsive<enum>`                                        | No default value |
| `weight`       | `Responsive<"light" \| "regular" \| "medium" \| "bold">`  | No default value |
| `color`        | `enum`                                                    | No default value |
| `highContrast` | `boolean`                                                 | No default value |
| `truncate`     | `boolean`                                                 | No default value |
| `wrap`         | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | No default value |

## [Examples](#examples)

### [Size](#size)

Use the `size` prop to control the size.

```jsx
<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>
```

### [Weight](#weight)

Use the `weight` prop to set the text weight.

```jsx
<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>
```

### [Color](#color)

Use the `color` prop to assign a specific [color](/themes/docs/theme/color).

```jsx
<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>
```

### [High-contrast](#high-contrast)

Use the `highContrast` prop to increase color contrast with the background.

```jsx
<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>
```

### [Truncate](#truncate)

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

```jsx
<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>
```

<!--$-->

<!--/$-->