Schema Explorer

Column

Defines a container that is part of a ColumnSet.

Property Type Required Description Version
items array[] Yes The card elements to include in the Column. 1.0
selectAction object No An Action that will be invoked when the Column is tapped or selected. Action.ShowCard is not supported. 1.1
style string No Style hint for Column. 1.0
width string,number No "auto", "stretch", or a number representing relative width of the column in the column group. 1.0
type "Column" No Must be "Column". 1.0
id string No A unique identifier associated with the element. 1.0
spacing string No Controls the amount of spacing between this element and the preceding element. 1.0
separator boolean No, default: false When true, draw a separating line at the top of the element. 1.0

Example

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Column 1"
						},
						{
							"type": "Image",
							"url": "http://adaptivecards.io/content/cats/1.png"
						}
					]
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Column 2"
						},
						{
							"type": "Image",
							"url": "http://adaptivecards.io/content/cats/1.png"
						}
					]
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Column 3"
						},
						{
							"type": "Image",
							"url": "http://adaptivecards.io/content/cats/1.png"
						}
					]
				}
			]
		}
	]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "text": "Column 1" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png" } ] }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "Column 2" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png" } ] }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "Column 3" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png" } ] } ] } ] }
Try it Yourself »

Properties

items

The card elements to include in the Column.

  • Type: array[]
  • Required: Yes

selectAction

An Action that will be invoked when the Column is tapped or selected. Action.ShowCard is not supported.

  • Type: object
  • Required: No

Example

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "TextBlock",
			"text": "Try clicking a column!",
			"weight": "bolder"
		},
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Column 1"
						},
						{
							"type": "Image",
							"url": "http://adaptivecards.io/content/cats/1.png"
						}
					],
					"selectAction": {
						"type": "Action.OpenUrl",
						"title": "cool link",
						"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
					}
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Column 2"
						},
						{
							"type": "Image",
							"url": "http://adaptivecards.io/content/cats/1.png"
						}
					],
					"selectAction": {
						"type": "Action.OpenUrl",
						"title": "cool link",
						"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
					}
				},
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "Column 3"
						},
						{
							"type": "Image",
							"url": "http://adaptivecards.io/content/cats/1.png"
						}
					],
					"selectAction": {
						"type": "Action.OpenUrl",
						"title": "cool link",
						"url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
					}
				}
			]
		}
	]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "Try clicking a column!", "weight": "bolder" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "text": "Column 1" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png" } ], "selectAction": { "type": "Action.OpenUrl", "title": "cool link", "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ" } }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "Column 2" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png" } ], "selectAction": { "type": "Action.OpenUrl", "title": "cool link", "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ" } }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "Column 3" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png" } ], "selectAction": { "type": "Action.OpenUrl", "title": "cool link", "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ" } } ] } ] }
Try it Yourself »

style

Style hint for Column.

  • Type: string
  • Required: No
  • Allowed values:
    • "default"
    • "emphasis"

Example

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"items": [
						{
							"type": "TextBlock",
							"text": "No Style"
						}
					]
				},
				{
					"type": "Column",
					"style": "default",
					"items": [
						{
							"type": "TextBlock",
							"text": "Default Style"
						}
					]
				},
				{
					"type": "Column",
					"style": "emphasis",
					"items": [
						{
							"type": "TextBlock",
							"text": "Emphasis Style"
						},
						{
							"type": "Container",
							"items": [
								{
									"type": "TextBlock",
									"text": "Container no style"
								}
							]
						},
						{
							"type": "Container",
							"style": "default",
							"items": [
								{
									"type": "TextBlock",
									"text": "Container default style"
								}
							]
						},
						{
							"type": "Container",
							"style": "emphasis",
							"items": [
								{
									"type": "TextBlock",
									"text": "Container emphasis style"
								}
							]
						}
					]
				}
			]
		}
	]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "text": "No Style" } ] }, { "type": "Column", "style": "default", "items": [ { "type": "TextBlock", "text": "Default Style" } ] }, { "type": "Column", "style": "emphasis", "items": [ { "type": "TextBlock", "text": "Emphasis Style" }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "Container no style" } ] }, { "type": "Container", "style": "default", "items": [ { "type": "TextBlock", "text": "Container default style" } ] }, { "type": "Container", "style": "emphasis", "items": [ { "type": "TextBlock", "text": "Container emphasis style" } ] } ] } ] } ] }
Try it Yourself »

width

"auto", "stretch", or a number representing relative width of the column in the column group.

  • Type: string,number
  • Required: No

Example

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "TextBlock",
							"text": "(auto)"
						},
						{
							"type": "Image",
							"url": "http://adaptivecards.io/content/adaptive-card-50.png"
						}
					]
				},
				{
					"type": "Column",
					"width": "stretch",
					"items": [
						{
							"type": "TextBlock",
							"horizontalAlignment": "center",
							"text": "(stretch)"
						},
						{
							"type": "Image",
							"horizontalAlignment": "center",
							"url": "http://adaptivecards.io/content/adaptive-card-50.png"
						}
					]
				},
				{
					"type": "Column",
					"width": "auto",
					"items": [
						{
							"type": "TextBlock",
							"text": "(auto)"
						},
						{
							"type": "Image",
							"url": "http://adaptivecards.io/content/adaptive-card-50.png"
						}
					]
				}
			]
		}
	]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "(auto)" }, { "type": "Image", "url": "http://adaptivecards.io/content/adaptive-card-50.png" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "horizontalAlignment": "center", "text": "(stretch)" }, { "type": "Image", "horizontalAlignment": "center", "url": "http://adaptivecards.io/content/adaptive-card-50.png" } ] }, { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "(auto)" }, { "type": "Image", "url": "http://adaptivecards.io/content/adaptive-card-50.png" } ] } ] } ] }
Try it Yourself »

type

Must be "Column".

  • Type: "Column"
  • Required: No
  • Allowed values:
    • Column

id

A unique identifier associated with the element.

  • Type: string
  • Required: No

spacing

Controls the amount of spacing between this element and the preceding element.

  • Type: string
  • Required: No
  • Allowed values:
    • "none"
    • "small"
    • "default"
    • "medium"
    • "large"
    • "extraLarge"
    • "padding"

Example

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"speak": "The Seattle Seahawks beat the Carolina Panthers 40-7",
	"body": [
		{
			"type": "Container",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"width": "auto",
							"items": [
								{
									"type": "Image",
									"url": "http://adaptivecards.io/content/cats/3.png",
									"size": "medium"
								},
								{
									"type": "TextBlock",
									"text": "SHADES",
									"horizontalAlignment": "center",
									"weight": "bolder"
								}
							]
						},
						{
							"type": "Column",
							"width": "stretch",
							"separator": true,
							"spacing": "medium",
							"items": [
								{
									"type": "TextBlock",
									"text": "Dec 4",
									"horizontalAlignment": "center"
								},
								{
									"type": "TextBlock",
									"text": "Final",
									"spacing": "none",
									"horizontalAlignment": "center"
								},
								{
									"type": "TextBlock",
									"text": "7 - 40",
									"size": "extraLarge",
									"horizontalAlignment": "center"
								}
							]
						},
						{
							"type": "Column",
							"width": "auto",
							"separator": true,
							"spacing": "medium",
							"items": [
								{
									"type": "Image",
									"url": "http://adaptivecards.io/content/cats/2.png",
									"size": "medium",
									"horizontalAlignment": "center"
								},
								{
									"type": "TextBlock",
									"text": "SKINS",
									"horizontalAlignment": "center",
									"weight": "bolder"
								}
							]
						}
					]
				}
			]
		}
	]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "speak": "The Seattle Seahawks beat the Carolina Panthers 40-7", "body": [ { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "url": "http://adaptivecards.io/content/cats/3.png", "size": "medium" }, { "type": "TextBlock", "text": "SHADES", "horizontalAlignment": "center", "weight": "bolder" } ] }, { "type": "Column", "width": "stretch", "separator": true, "spacing": "medium", "items": [ { "type": "TextBlock", "text": "Dec 4", "horizontalAlignment": "center" }, { "type": "TextBlock", "text": "Final", "spacing": "none", "horizontalAlignment": "center" }, { "type": "TextBlock", "text": "7 - 40", "size": "extraLarge", "horizontalAlignment": "center" } ] }, { "type": "Column", "width": "auto", "separator": true, "spacing": "medium", "items": [ { "type": "Image", "url": "http://adaptivecards.io/content/cats/2.png", "size": "medium", "horizontalAlignment": "center" }, { "type": "TextBlock", "text": "SKINS", "horizontalAlignment": "center", "weight": "bolder" } ] } ] } ] } ] }
Try it Yourself »

separator

When true, draw a separating line at the top of the element.

  • Type: boolean
  • Required: No, default: false