Column

Defines a container that is part of a ColumnSet

Property Type Required Description
items array[] Yes The Card Elements to include in the Column
selectAction object No An Action that will be invoked when the Column is tapped or selected
width string,number No “auto”, “stretch”, or a number representing relative width of the column in the column group
type "Column" No Must be Column
id string No A unique Id associated with the element
spacing string No Controls the amount of spacing between this element and the previous element.
separator boolean No, default: false The Separator object type describes the look and feel of a separation line between two elements.

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

  • Type: object
  • Required: No
  • Allowed values:

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

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 Id associated with the element

  • Type: string
  • Required: No

spacing

Controls the amount of spacing between this element and the previous 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

The Separator object type describes the look and feel of a separation line between two elements.

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