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

> ## Agent Instructions
> Install the Courier skill before writing code: `npx skills add trycourier/courier-skills`. It carries the verified SDK shapes and the rules you cannot get wrong.
> Authenticate every request with `Authorization: Bearer <API_KEY>`. A workspace has several environments and each has its own keys, which are plain `pk_` strings with no environment prefix. Start with Test.
> Send with `client.send.message`, the default import of the v7 Node SDK. Reference a template by its `nt_` id or its alias.
> A send accepts a bare Elemental element list, but storing content on a template requires the top-level elements wrapped in a channel element.
> Templates and journeys can be built in the Courier app or created through the API. Either way they live in the workspace and are referenced by ID when you send.
> The hosted MCP server is https://mcp.courier.com. For a briefing on what Courier is and when to use it, read https://www.courier.com/llms.txt.
> Prefer the Guides tab for how-do-I questions and the Docs tab for how-does-it-behave questions. The API reference lives under /api-reference.

# Design Studio block settings

> Every setting on each Design Studio block, with its type and default.

export const Doc = ({href, children, name, bare}) => {
  const label = children || name || href;
  if (bare) {
    return <a href={href}>{label}</a>;
  }
  return <a className="cx-endpoint" data-kind="doc" href={href}>
      <span className="cx-endpoint-label">{label}</span>
      <span className="cx-endpoint-method">DOC</span>
    </a>;
};

Select a block on the canvas and its settings open in the right panel. This page is the reference for what each one exposes.

Padding, border, and color values are pixels or CSS color strings unless a row says otherwise. Add and arrange blocks in <Doc href="/docs/design/templates/design-studio">Design Studio</Doc>.

## Heading and text

**These are one settings surface.** A heading is a text block with a heading level. Both take the same attributes and the same defaults.

| Setting             | Type                                 | Default       |
| ------------------- | ------------------------------------ | ------------- |
| `paddingVertical`   | number                               | `6`           |
| `paddingHorizontal` | number                               | `0`           |
| `backgroundColor`   | color                                | `transparent` |
| `borderWidth`       | number                               | `0`           |
| `borderColor`       | color                                | `transparent` |
| `textAlign`         | `left`, `center`, `right`, `justify` | `left`        |
| `fontSize`          | number or null                       | `null`        |
| `lineHeight`        | number or null                       | `null`        |

**`null` on `fontSize` or `lineHeight` means inherit, not zero.** The block falls back to the document base, then to the tier preset, and the value is not written into Elemental at all. Setting either to `0` or clearing it reads as inherit too, so there is no way to express "no line height".

## Button

| Setting             | Type                                      | Default       |
| ------------------- | ----------------------------------------- | ------------- |
| `label`             | string                                    | `Enter text`  |
| `link`              | string                                    | empty         |
| `alignment`         | `left`, `center`, `right`                 | `center`      |
| `actionStyle`       | `button`, `secondary`, `tertiary`, `link` | `button`      |
| `backgroundColor`   | color                                     | `#0085FF`     |
| `textColor`         | color                                     | `#ffffff`     |
| `borderColor`       | color                                     | `transparent` |
| `borderRadius`      | number                                    | `0`           |
| `paddingVertical`   | number                                    | `8`           |
| `paddingHorizontal` | number                                    | `16`          |
| `fontSize`          | number or null                            | `null`        |
| `fontWeight`        | `normal`, `bold`                          | `normal`      |
| `fontStyle`         | `normal`, `italic`                        | `normal`      |
| `isUnderline`       | boolean                                   | `false`       |
| `isStrike`          | boolean                                   | `false`       |
| `disableTracking`   | boolean                                   | `false`       |

`disableTracking` stops Courier rewriting the button's URL for click tracking. Turn it on for a link that must reach the destination unmodified, and accept that clicks on it stop being recorded. See <Doc href="/docs/monitor/tracking">tracking</Doc>.

`actionStyle` names how the action renders, and the four values mean different things per channel. Inbox in particular applies no colours of its own, so the style name is the whole contract there.

## Divider and Spacer

**One block with a `variant` switch, which is why they share a table.** The defaults differ, and that is the point. A divider draws a visible line. A spacer reserves height and draws nothing.

| Setting   | Type                | Divider default | Spacer default |
| --------- | ------------------- | --------------- | -------------- |
| `variant` | `divider`, `spacer` | `divider`       | `spacer`       |
| `padding` | number              | `6`             | `24`           |
| `color`   | color               | `#000000`       | `transparent`  |
| `size`    | number              | `1`             | `1`            |
| `radius`  | number              | `0`             | `0`            |

A spacer is a transparent divider with more padding. Setting a spacer's `color` makes it a divider in everything but name.

## Image

| Setting       | Type                      | Default       |
| ------------- | ------------------------- | ------------- |
| `sourcePath`  | string                    | empty         |
| `link`        | string                    | empty         |
| `alt`         | string                    | empty         |
| `alignment`   | `left`, `center`, `right` | `center`      |
| `width`       | number                    | `1`           |
| `borderWidth` | number                    | `0`           |
| `borderColor` | color                     | `transparent` |

Give every image an `alt`. An email client that blocks images shows that text instead, which for many readers is the only version of the message they see.

## List

| Setting             | Type                   | Default     |
| ------------------- | ---------------------- | ----------- |
| `listType`          | `ordered`, `unordered` | `unordered` |
| `paddingVertical`   | number                 | `6`         |
| `paddingHorizontal` | number                 | `0`         |
| `fontSize`          | number or null         | `null`      |
| `lineHeight`        | number or null         | `null`      |
| `loop`              | string                 | empty       |

`loop` is the data path the list repeats over, and it is what turns one list item into one per array entry at send time. See <Doc href="/docs/design/elemental/control-flow#loop">control flow</Doc>.

## Column

A Column block holds cells, and each cell has its own settings.

| Column setting      | Type           | Default       |
| ------------------- | -------------- | ------------- |
| `columnsCount`      | number, 1 to 4 | `2`           |
| `paddingHorizontal` | number         | `0`           |
| `paddingVertical`   | number         | `0`           |
| `backgroundColor`   | color          | `transparent` |
| `borderWidth`       | number         | `0`           |
| `borderRadius`      | number         | `0`           |
| `borderColor`       | color          | `transparent` |

| Cell setting        | Type   | Default       |
| ------------------- | ------ | ------------- |
| `paddingHorizontal` | number | `6`           |
| `paddingVertical`   | number | `6`           |
| `backgroundColor`   | color  | `transparent` |
| `borderWidth`       | number | `0`           |
| `borderRadius`      | number | `0`           |
| `borderColor`       | color  | `transparent` |

The cells carry padding by default and the column does not, so spacing between columns comes from the cells unless you change it.

## Blockquote

| Setting             | Type           | Default       |
| ------------------- | -------------- | ------------- |
| `paddingHorizontal` | number         | `20`          |
| `paddingVertical`   | number         | `4`           |
| `backgroundColor`   | color          | `transparent` |
| `borderLeftWidth`   | number         | `2`           |
| `borderColor`       | color          | `#e0e0e0`     |
| `fontSize`          | number or null | `null`        |
| `lineHeight`        | number or null | `null`        |

A blockquote is the one block styled by a left border rather than a full one, so `borderLeftWidth` replaces `borderWidth` here.

## HTML

| Setting | Type   | Default         |
| ------- | ------ | --------------- |
| `code`  | string | an HTML comment |

Raw HTML for email, when no other block expresses what you need. <Doc href="/docs/design/elemental/elements/html">The html element</Doc> covers what a provider does with it, and <Doc href="/docs/design/templates/html-email">HTML email</Doc> covers bringing a whole document in.

## Jsonnet

| Setting    | Type   | Default            |
| ---------- | ------ | ------------------ |
| `template` | string | a starter template |

Generates content programmatically. See <Doc href="/docs/design/elemental/elements/jsonnet">the jsonnet element</Doc>.
