> ## Documentation Index
> Fetch the complete documentation index at: https://docs.autype.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Block Quotes

> Styled block quote containers with borders, backgrounds, and typography options

Block quote elements render styled containers with a left border, useful for callouts, quoted text, or highlighted sections. They can contain any other content elements as children.

## Basic block quote

```json theme={null}
{
  "type": "blockquote",
  "content": [
    { "type": "text", "text": "This is a block quote with default styling." }
  ]
}
```

By default, block quotes render with a 3px gray left border and 10mm left indent.

## Properties

| Property          | Type    | Required | Default     | Description                                                             |
| ----------------- | ------- | -------- | ----------- | ----------------------------------------------------------------------- |
| `type`            | string  | **Yes**  | —           | Must be `"blockquote"`                                                  |
| `id`              | string  | No       | auto        | Unique identifier. Auto-generated if not provided. Max: 100 chars.      |
| `content`         | array   | **Yes**  | —           | Array of child elements (text, lists, images, etc.). Min: 1, max: 200.  |
| `fontFamily`      | string  | No       | inherited   | Font family override. Max: 100 chars.                                   |
| `fontSize`        | number  | No       | inherited   | Font size in pt (6–72).                                                 |
| `fontWeight`      | string  | No       | `"normal"`  | `"normal"` or `"bold"`                                                  |
| `fontStyle`       | string  | No       | `"normal"`  | `"normal"` or `"italic"`                                                |
| `color`           | string  | No       | inherited   | Text color in hex (`#RGB` or `#RRGGBB`).                                |
| `align`           | string  | No       | `"left"`    | Alignment: `"left"`, `"center"`, `"right"`, `"justify"`                 |
| `backgroundColor` | string  | No       | —           | Background color in hex (`#RGB`, `#RRGGBB`, or `#RRGGBBAA` with alpha). |
| `borderWidth`     | number  | No       | `3`         | Border width in px (0–20).                                              |
| `borderColor`     | string  | No       | `"#CCCCCC"` | Border color in hex (`#RGB` or `#RRGGBB`).                              |
| `borderTop`       | boolean | No       | `false`     | Show top border.                                                        |
| `borderBottom`    | boolean | No       | `false`     | Show bottom border.                                                     |
| `borderLeft`      | boolean | No       | `true`      | Show left border.                                                       |
| `borderRight`     | boolean | No       | `false`     | Show right border.                                                      |
| `indentLeft`      | number  | No       | `10`        | Left indent in mm (0–100).                                              |
| `indentRight`     | number  | No       | `0`         | Right indent in mm (0–100).                                             |
| `spacing`         | object  | No       | —           | Spacing override with `before` and `after` in pt (0–100).               |

<Info>
  The defaults shown above are the **built-in fallbacks**. Block quotes also respect styles from `defaults.styles.blockquote` in your document configuration.
</Info>

## Content

The `content` array accepts the same element types as a flow section — text, headings, lists, images, tables, etc. This makes block quotes flexible containers:

```json theme={null}
{
  "type": "blockquote",
  "content": [
    { "type": "text", "text": "**Important:** Review the following items before proceeding." },
    {
      "type": "list",
      "ordered": true,
      "items": ["Check all inputs", "Validate results", "Submit report"]
    }
  ]
}
```

## Styling examples

### Callout box with background

```json theme={null}
{
  "type": "blockquote",
  "backgroundColor": "#FFF3E0",
  "borderColor": "#FF9800",
  "borderWidth": 3,
  "content": [
    { "type": "text", "text": "**Note:** Please review the attached documents before the meeting." }
  ]
}
```

### Box with all borders

```json theme={null}
{
  "type": "blockquote",
  "borderTop": true,
  "borderBottom": true,
  "borderLeft": true,
  "borderRight": true,
  "borderColor": "#1976D2",
  "backgroundColor": "#E3F2FD",
  "content": [
    { "type": "text", "text": "This block quote has borders on all four sides." }
  ]
}
```

### Italic centered quote

```json theme={null}
{
  "type": "blockquote",
  "fontStyle": "italic",
  "align": "center",
  "color": "#555555",
  "content": [
    { "type": "text", "text": "\"The best way to predict the future is to invent it.\"" }
  ]
}
```

### Custom indent and spacing

```json theme={null}
{
  "type": "blockquote",
  "indentLeft": 20,
  "indentRight": 20,
  "spacing": { "before": 12, "after": 12 },
  "content": [
    { "type": "text", "text": "This block quote is indented further from both sides with extra spacing." }
  ]
}
```

## Defaults

Configure default styles for all block quotes via `defaults.styles.blockquote`:

```json theme={null}
{
  "defaults": {
    "styles": {
      "blockquote": {
        "fontFamily": "Georgia",
        "fontStyle": "italic",
        "color": "#444444",
        "backgroundColor": "#F5F5F5",
        "borderColor": "#999999",
        "borderWidth": 3,
        "indentLeft": 15
      }
    }
  }
}
```

### Block quote style properties

| Property          | Type    | Description                                       |
| ----------------- | ------- | ------------------------------------------------- |
| `fontFamily`      | string  | Default font family. Max: 100 chars.              |
| `fontSize`        | number  | Default font size in pt (6–72).                   |
| `fontWeight`      | string  | `"normal"` or `"bold"`                            |
| `fontStyle`       | string  | `"normal"` or `"italic"`                          |
| `color`           | string  | Default text color in hex.                        |
| `align`           | string  | Default alignment.                                |
| `backgroundColor` | string  | Default background color in hex (supports alpha). |
| `borderWidth`     | number  | Default border width in px (0–20).                |
| `borderColor`     | string  | Default border color in hex.                      |
| `borderTop`       | boolean | Default top border visibility.                    |
| `borderBottom`    | boolean | Default bottom border visibility.                 |
| `borderLeft`      | boolean | Default left border visibility.                   |
| `borderRight`     | boolean | Default right border visibility.                  |
| `indentLeft`      | number  | Default left indent in mm (0–100).                |
| `indentRight`     | number  | Default right indent in mm (0–100).               |

You can also configure default spacing for block quotes via `defaults.spacing`:

```json theme={null}
{
  "defaults": {
    "spacing": {
      "before": { "blockquote": 8 },
      "after": { "blockquote": 8 }
    }
  }
}
```

## Complete example

```json theme={null}
{
  "document": { "type": "pdf", "size": "A4" },
  "defaults": {
    "fontFamily": "Noto Sans",
    "fontSize": 11,
    "styles": {
      "blockquote": {
        "fontStyle": "italic",
        "borderColor": "#999999",
        "indentLeft": 12
      }
    }
  },
  "sections": [
    {
      "type": "flow",
      "content": [
        { "type": "h1", "text": "Research Summary" },
        { "type": "text", "text": "The study concluded with the following key finding:" },
        {
          "type": "blockquote",
          "content": [
            { "type": "text", "text": "Automation reduces document production time by an average of **73%** compared to manual processes." }
          ]
        },
        { "type": "text", "text": "This result was consistent across all test groups." },
        {
          "type": "blockquote",
          "backgroundColor": "#FFF8E1",
          "borderColor": "#FFC107",
          "fontStyle": "normal",
          "content": [
            { "type": "text", "text": "**Warning:** These results are preliminary and should be validated with a larger sample size." }
          ]
        }
      ]
    }
  ]
}
```