> ## 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.

# Elemental columns element

> Lay out content side by side in columns with their own width and styling.

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>;
};

The columns element holds a row of columns for side-by-side content. Each column can set its own styling, width, and content. The type value is `"columns"`, and each child must be a `"column"` element.

**When to use:**

* Create side-by-side layouts (e.g., product images with descriptions)
* Build responsive multi-column grids
* Organize content in structured layouts
* Display data in tabular-like formats

<Note>
  **Email client compatibility**: column styling uses MJML patterns. Borders and border radius render correctly in most modern email clients and degrade gracefully in older ones. The `gap` property inserts spacer columns between content columns to get the spacing right.
</Note>

**Basic example**

<CodeGroup>
  ```json Elemental theme={null}
  {
    "type": "columns",
    "elements": [
      {
        "type": "column",
        "width": "50%",
        "elements": [
          {
            "type": "image",
            "src": "https://example.com/product.png"
          }
        ]
      },
      {
        "type": "column",
        "width": "50%",
        "elements": [
          {
            "type": "text",
            "content": "Product Name",
            "text_style": "h2"
          },
          {
            "type": "text",
            "content": "$99.99"
          }
        ]
      }
    ]
  }
  ```

  ```javascript Node.js highlight={9-38} theme={null}
  const { requestId } = await client.send.message({
    message: {
      to: {
        email: "sarah@acme-corp.com",
      },
      content: {
        version: "2022-01-01",
        elements: [
          {
            type: "columns",
            elements: [
              {
                type: "column",
                width: "50%",
                elements: [
                  {
                    type: "image",
                    src: "https://example.com/product.png",
                  },
                ],
              },
              {
                type: "column",
                width: "50%",
                elements: [
                  {
                    type: "text",
                    content: "Product Name",
                    text_style: "h2",
                  },
                  {
                    type: "text",
                    content: "$99.99",
                  },
                ],
              },
            ],
          },
        ],
      },
    },
  });
  ```

  ```python Python highlight={9-38} theme={null}
  response = client.send.message(
      message={
        "to": {
          "email": "sarah@acme-corp.com",
        },
        "content": {
          "version": "2022-01-01",
          "elements": [
            {
              "type": "columns",
              "elements": [
                {
                  "type": "column",
                  "width": "50%",
                  "elements": [
                    {
                      "type": "image",
                      "src": "https://example.com/product.png",
                    },
                  ],
                },
                {
                  "type": "column",
                  "width": "50%",
                  "elements": [
                    {
                      "type": "text",
                      "content": "Product Name",
                      "text_style": "h2",
                    },
                    {
                      "type": "text",
                      "content": "$99.99",
                    },
                  ],
                },
              ],
            },
          ],
        },
      },
  )
  ```

  ```bash cURL highlight={12-41} theme={null}
  curl -X POST https://api.courier.com/send \
    -H "Authorization: Bearer $COURIER_API_KEY" \
    -H "Content-Type: application/json" \
    -d '{
        "message": {
          "to": {
            "email": "sarah@acme-corp.com"
          },
          "content": {
            "version": "2022-01-01",
            "elements": [
              {
                "type": "columns",
                "elements": [
                  {
                    "type": "column",
                    "width": "50%",
                    "elements": [
                      {
                        "type": "image",
                        "src": "https://example.com/product.png"
                      }
                    ]
                  },
                  {
                    "type": "column",
                    "width": "50%",
                    "elements": [
                      {
                        "type": "text",
                        "content": "Product Name",
                        "text_style": "h2"
                      },
                      {
                        "type": "text",
                        "content": "$99.99"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        }
      }'
  ```

  ```ruby Ruby highlight={9-38} theme={null}
  response = courier.send_.message(
    message: {
      to: {
        email: "sarah@acme-corp.com"
      },
      content: {
        version: "2022-01-01",
        elements: [
          {
            type: "columns",
            elements: [
              {
                type: "column",
                width: "50%",
                elements: [
                  {
                    type: "image",
                    src: "https://example.com/product.png"
                  }
                ]
              },
              {
                type: "column",
                width: "50%",
                elements: [
                  {
                    type: "text",
                    content: "Product Name",
                    text_style: "h2"
                  },
                  {
                    type: "text",
                    content: "$99.99"
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  )
  ```

  ```go Go highlight={5-34} theme={null}
  // Elemental nodes carry no typed content fields, so pass the document as raw JSON.
  content := param.Override[shared.ElementalContentParam](json.RawMessage(`{
    "version": "2022-01-01",
    "elements": [
      {
        "type": "columns",
        "elements": [
          {
            "type": "column",
            "width": "50%",
            "elements": [
              {
                "type": "image",
                "src": "https://example.com/product.png"
              }
            ]
          },
          {
            "type": "column",
            "width": "50%",
            "elements": [
              {
                "type": "text",
                "content": "Product Name",
                "text_style": "h2"
              },
              {
                "type": "text",
                "content": "$99.99"
              }
            ]
          }
        ]
      }
    ]
  }`))

  response, err := client.Send.Message(context.TODO(), courier.SendMessageParams{
  	Message: courier.SendMessageParamsMessage{
  		To: courier.SendMessageParamsMessageToUnion{
  			OfUserRecipient: &shared.UserRecipientParam{
  				Email: courier.String("sarah@acme-corp.com"),
  			},
  		},
  		Content: courier.SendMessageParamsMessageContentUnion{OfElementalContent: &content},
  	},
  })
  ```

  ```java Java highlight={7-27} theme={null}
  SendMessageParams params = SendMessageParams.builder()
      .message(SendMessageParams.Message.builder()
          .to(JsonValue.from(java.util.Map.of("email", "sarah@acme-corp.com")))
          .content(JsonValue.from(java.util.Map.of(
                  "version", "2022-01-01",
                  "elements", java.util.List.of(
                    java.util.Map.of(
                      "type", "columns",
                      "elements", java.util.List.of(
                        java.util.Map.of(
                          "type", "column",
                          "width", "50%",
                          "elements", java.util.List.of(
                            java.util.Map.of(
                              "type", "image",
                              "src", "https://example.com/product.png"))),
                        java.util.Map.of(
                          "type", "column",
                          "width", "50%",
                          "elements", java.util.List.of(
                            java.util.Map.of(
                              "type", "text",
                              "content", "Product Name",
                              "text_style", "h2"),
                            java.util.Map.of(
                              "type", "text",
                              "content", "$99.99")))))))))
          .build())
      .build();
  SendMessageResponse response = client.send().message(params);
  ```

  ```php PHP highlight={9-38} theme={null}
  $response = $client->send->message(
    message: [
      'to' => [
        'email' => 'sarah@acme-corp.com',
      ],
      'content' => [
        'version' => '2022-01-01',
        'elements' => [
          [
            'type' => 'columns',
            'elements' => [
              [
                'type' => 'column',
                'width' => '50%',
                'elements' => [
                  [
                    'type' => 'image',
                    'src' => 'https://example.com/product.png',
                  ],
                ],
              ],
              [
                'type' => 'column',
                'width' => '50%',
                'elements' => [
                  [
                    'type' => 'text',
                    'content' => 'Product Name',
                    'text_style' => 'h2',
                  ],
                  [
                    'type' => 'text',
                    'content' => '$99.99',
                  ],
                ],
              ],
            ],
          ],
        ],
      ],
    ],
  );
  ```

  ```csharp C# highlight={12-41} theme={null}
  // Elemental nodes expose no typed content fields, so build the document from raw JSON.
  SendMessageParams parameters = new()
  {
      Message = new()
      {
          To = new UserRecipient { Email = "sarah@acme-corp.com" },
          Content = ElementalContent.FromRawUnchecked(
              JsonSerializer.Deserialize<Dictionary<string, JsonElement>>("""
              {
                "version": "2022-01-01",
                "elements": [
                  {
                    "type": "columns",
                    "elements": [
                      {
                        "type": "column",
                        "width": "50%",
                        "elements": [
                          {
                            "type": "image",
                            "src": "https://example.com/product.png"
                          }
                        ]
                      },
                      {
                        "type": "column",
                        "width": "50%",
                        "elements": [
                          {
                            "type": "text",
                            "content": "Product Name",
                            "text_style": "h2"
                          },
                          {
                            "type": "text",
                            "content": "$99.99"
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
              """)),
      },
  };

  var response = await client.Send.Message(parameters);
  ```

  ```bash CLI highlight={4} theme={null}
  courier send message \
    --api-key "$COURIER_API_KEY" \
    --message.to '{"email": "sarah@acme-corp.com"}' \
    --message.content '{"version": "2022-01-01", "elements": [{"type": "columns", "elements": [{"type": "column", "width": "50%", "elements": [{"type": "image", "src": "https://example.com/product.png"}]}, {"type": "column", "width": "50%", "elements": [{"type": "text", "content": "Product Name", "text_style": "h2"}, {"type": "text", "content": "$99.99"}]}]}]}'
  ```

  ```text MCP theme={null}
  With Courier MCP, send an email to sarah@acme-corp.com laid out in two columns.
  ```
</CodeGroup>

**Columns element fields**

<ParamField path="elements" type="CourierColumn[]" required>
  An array of column elements. Each must be of type `"column"`. See the **Column element** section below.
</ParamField>

<ParamField path="background_color" type="string">
  Background color for the columns container. Any valid CSS color value (e.g., `"#f5f5f5"`, `"rgb(245,245,245)"`).
</ParamField>

<ParamField path="border_width" type="string">
  Border width for the columns container (e.g., `"1px"`, `"2px"`).
</ParamField>

<ParamField path="border_color" type="string">
  Border color for the columns container (e.g., `"#cccccc"`, `"rgb(204,204,204)"`).
</ParamField>

<ParamField path="border_radius" type="string">
  Border radius for rounded corners on the container (e.g., `"5px"`, `"10px"`).
</ParamField>

<ParamField path="gap" type="string">
  Spacing between columns. Automatically inserts spacer columns with exact width (e.g., `"10px"`, `"15px"`).
</ParamField>

<ParamField path="padding" type="string">
  Inner padding for the columns container. CSS shorthand works (e.g., `"10px"`, `"20px 10px"`).
</ParamField>

<ParamField path="vertical_align" type="string">
  Alignment of columns within the row. One of `"top"`, `"middle"`, or `"bottom"`. Defaults to `"top"`.
</ParamField>

**Column element**

Each child in a columns element's `elements` array must be of type `column`. Each one can set its own styling and width.

<ParamField path="type" type="string" required>
  Must be `"column"`.
</ParamField>

<ParamField path="elements" type="CourierElement[]" required>
  The content blocks inside this column. Any Elemental elements (text, image, action, etc.).
</ParamField>

<ParamField path="width" type="string">
  The width of the column. Can be:

  * Percentage: `"50%"`, `"33.33%"`
  * Fixed: `"200px"`, `"300px"`
  * Auto: `"auto"` (takes remaining space)
</ParamField>

<ParamField path="background_color" type="string">
  Hex code or CSS color for the column background (e.g., `"#F4F7FF"`, `"rgb(244,247,255)"`).
</ParamField>

<ParamField path="border_width" type="string">
  Border width for this specific column (e.g., `"1px"`, `"2px"`).
</ParamField>

<ParamField path="border_color" type="string">
  Border color for this specific column (e.g., `"#cccccc"`, `"rgb(204,204,204)"`).
</ParamField>

<ParamField path="border_radius" type="string">
  Border radius for rounded corners on this column (e.g., `"5px"`, `"10px"`).
</ParamField>

<ParamField path="padding" type="string">
  CSS padding shorthand for the column (e.g., `"10px"`, `"20px 10px"`).
</ParamField>

<ParamField path="vertical_align" type="string">
  Overrides the parent's vertical alignment for this column. One of `"top"`, `"middle"`, or `"bottom"`.
</ParamField>

**Examples and variants**

**Two-column layout**

Basic sidebar and main content layout:

```json theme={null}
{
  "type": "columns",
  "elements": [
    {
      "type": "column",
      "width": "30%",
      "background_color": "#F4F7FF",
      "padding": "20px",
      "elements": [
        {
          "type": "image",
          "src": "https://example.com/avatar.png",
          "width": "50px"
        },
        {
          "type": "text",
          "content": "User Profile",
          "text_style": "subtext"
        }
      ]
    },
    {
      "type": "column",
      "width": "70%",
      "padding": "20px",
      "elements": [
        {
          "type": "text",
          "content": "Welcome to the platform!",
          "text_style": "h2"
        },
        {
          "type": "text",
          "content": "We are excited to have you here. Your account is now active."
        },
        {
          "type": "action",
          "content": "Get Started",
          "href": "https://example.com/start",
          "style": "button"
        }
      ]
    }
  ]
}
```

**Equal-width columns**

Three equal columns with middle vertical alignment:

```json theme={null}
{
  "type": "columns",
  "vertical_align": "middle",
  "gap": "15px",
  "elements": [
    {
      "type": "column",
      "width": "33.33%",
      "elements": [
        {
          "type": "text",
          "content": "Column 1",
          "text_style": "h3"
        },
        {
          "type": "text",
          "content": "Content for first column"
        }
      ]
    },
    {
      "type": "column",
      "width": "33.33%",
      "elements": [
        {
          "type": "text",
          "content": "Column 2",
          "text_style": "h3"
        },
        {
          "type": "text",
          "content": "Content for second column"
        }
      ]
    },
    {
      "type": "column",
      "width": "33.33%",
      "elements": [
        {
          "type": "text",
          "content": "Column 3",
          "text_style": "h3"
        },
        {
          "type": "text",
          "content": "Content for third column"
        }
      ]
    }
  ]
}
```

**Styled container with borders**

Columns container with styling:

```json theme={null}
{
  "type": "columns",
  "padding": "20px",
  "background_color": "#f5f5f5",
  "border_width": "2px",
  "border_color": "#cccccc",
  "border_radius": "8px",
  "gap": "15px",
  "elements": [
    {
      "type": "column",
      "width": "50%",
      "elements": [
        {
          "type": "text",
          "content": "Left Column"
        }
      ]
    },
    {
      "type": "column",
      "width": "50%",
      "elements": [
        {
          "type": "text",
          "content": "Right Column"
        }
      ]
    }
  ]
}
```

**Product card layout**

Complete product card with image and details:

```json theme={null}
{
  "type": "columns",
  "padding": "25px",
  "background_color": "#ffffff",
  "border_width": "1px",
  "border_color": "#e0e0e0",
  "border_radius": "12px",
  "gap": "20px",
  "vertical_align": "middle",
  "elements": [
    {
      "type": "column",
      "width": "40%",
      "border_width": "1px",
      "border_color": "#4CAF50",
      "border_radius": "8px",
      "padding": "20px",
      "background_color": "#f1f8f4",
      "elements": [
        {
          "type": "image",
          "src": "https://example.com/product-image.jpg",
          "href": "https://example.com/product",
          "width": "100%"
        }
      ]
    },
    {
      "type": "column",
      "width": "60%",
      "elements": [
        {
          "type": "text",
          "content": "**Premium Product Name**",
          "text_style": "h2"
        },
        {
          "type": "text",
          "content": "High-quality product with exceptional features. Perfect for everyday use."
        },
        {
          "type": "text",
          "content": "**$149.99**",
          "bold": true
        },
        {
          "type": "action",
          "content": "Add to Cart",
          "href": "https://example.com/cart",
          "background_color": "#4CAF50",
          "style": "button"
        }
      ]
    }
  ]
}
```

**Channel support**

* **Email**: Full support with MJML rendering for maximum compatibility
* **Push**: Limited support. Columns may render as stacked content
* **SMS**: Not supported. Use single-column layouts
* **Inbox**: Full support with responsive behavior