# Quote

Short inline quotation.

```jsx
<Text>
  His famous quote, <Quote>Styles come and go. Good design is a language, not a style</Quote>,
  elegantly summs up Massimo’s philosophy of design.
</Text>
```

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

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

| Prop       | Type                                                      | Default          |
| ---------- | --------------------------------------------------------- | ---------------- |
| `asChild`  | `boolean`                                                 | No default value |
| `truncate` | `boolean`                                                 | No default value |
| `wrap`     | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | No default value |

## [Examples](#examples)

### [Truncate](#truncate)

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

```jsx
<Flex maxWidth="300px">
  <Quote truncate>
    The goal of typography is to relate font size, line height, and line width in a proportional way
    that maximizes beauty and makes reading easier and more pleasant.
  </Quote>
</Flex>
```