Elemental columns element

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

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.

Basic example

{
  "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"
        }
      ]
    }
  ]
}

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",
                },
              ],
            },
          ],
        },
      ],
    },
  },
});

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",
                  },
                ],
              },
            ],
          },
        ],
      },
    },
)

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"
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    }'

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"
                }
              ]
            }
          ]
        }
      ]
    }
  }
)

// 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},
	},
})

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

$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',
                ],
              ],
            ],
          ],
        ],
      ],
    ],
  ],
);

// 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);

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"}]}]}]}'

With Courier MCP, send an email to sarah@acme-corp.com laid out in two columns.

Columns element fields

CourierColumn[]

required

An array of column elements. Each must be of type "column". See the Column element section below.

string

Background color for the columns container. Any valid CSS color value (e.g., "#f5f5f5", "rgb(245,245,245)").

string

Border width for the columns container (e.g., "1px", "2px").

string

Border color for the columns container (e.g., "#cccccc", "rgb(204,204,204)").

string

Border radius for rounded corners on the container (e.g., "5px", "10px").

string

Spacing between columns. Automatically inserts spacer columns with exact width (e.g., "10px", "15px").

string

Inner padding for the columns container. CSS shorthand works (e.g., "10px", "20px 10px").

string

Alignment of columns within the row. One of "top", "middle", or "bottom". Defaults to "top".

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.

string

required

Must be "column".

CourierElement[]

required

The content blocks inside this column. Any Elemental elements (text, image, action, etc.).

string

The width of the column. Can be:

Percentage: "50%", "33.33%"
Fixed: "200px", "300px"
Auto: "auto" (takes remaining space)

string

Hex code or CSS color for the column background (e.g., "#F4F7FF", "rgb(244,247,255)").

string

Border width for this specific column (e.g., "1px", "2px").

string

Border color for this specific column (e.g., "#cccccc", "rgb(204,204,204)").

string

Border radius for rounded corners on this column (e.g., "5px", "10px").

string

CSS padding shorthand for the column (e.g., "10px", "20px 10px").

string

Overrides the parent’s vertical alignment for this column. One of "top", "middle", or "bottom".

Examples and variants Two-column layout Basic sidebar and main content layout:

{
  "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:

{
  "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:

{
  "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:

{
  "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

Get started

Send messages

Journeys

Broadcasts

Design

Recipients

Tenants

Monitoring

Workspaces

Resources

Elemental columns element