Container

Containers group items together

Property Type Required Description
items array[] Yes The Card Elements to render inside the Container
selectAction object No An Action that will be invoked when the Image is tapped or selected
style string No Style hint for Container
type "Container" No Must be Container
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": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "This is some text"
                },
                {
                    "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": "Container", "items": [ { "type": "TextBlock", "text": "This is some text" }, { "type": "Image", "url": "http://adaptivecards.io/content/cats/1.png" } ] } ] }
Try it Yourself »

Properties

items

The Card Elements to render inside the Container

  • Type: array[]
  • Required: Yes

selectAction

An Action that will be invoked when the Image 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": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "This is some text"
        }
      ],
      "selectAction": {
        "type": "Action.OpenUrl",
        "title": "cool link",
        "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
      }
    },

    {
      "type": "Container",
      "style": "emphasis",
      "items": [
        {
          "type": "TextBlock",
          "text": "Emphasis container"
        }
      ],
      "selectAction": {
        "type": "Action.OpenUrl",
        "title": "cool link 2",
        "url": "https://msn.com"
      }
    },

    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "Default container again, using ShowCard",
          "wrap": true
        }
      ],
      "selectAction": {
        "type": "Action.ShowCard",
        "title": "Show card action",
        "card": {
          "type": "AdaptiveCard",
          "body": [
            {
              "type": "TextBlock",
              "text": "What do you think?"
            }
          ],
          "actions": [
            {
              "type": "Action.Submit",
              "title": "Neat!"
            }
          ]
        }
      }
    },

    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "Submit action"
        }
      ],
      "selectAction": {
        "type": "Action.Submit",
        "title": "Submit action",
        "data": {
          "info": "My submit action data"
        }
      }
    }
  ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "This is some text" } ], "selectAction": { "type": "Action.OpenUrl", "title": "cool link", "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ" } }, { "type": "Container", "style": "emphasis", "items": [ { "type": "TextBlock", "text": "Emphasis container" } ], "selectAction": { "type": "Action.OpenUrl", "title": "cool link 2", "url": "https://msn.com" } }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "Default container again, using ShowCard", "wrap": true } ], "selectAction": { "type": "Action.ShowCard", "title": "Show card action", "card": { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "What do you think?" } ], "actions": [ { "type": "Action.Submit", "title": "Neat!" } ] } } }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "Submit action" } ], "selectAction": { "type": "Action.Submit", "title": "Submit action", "data": { "info": "My submit action data" } } } ] }
Try it Yourself »

style

Style hint for Container

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

type

Must be Container

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

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",
    "body": [
        {
            "type": "TextBlock",
            "text": "Container Spacing",
            "size": "extraLarge"
        },
        {
            "type": "Container",
            "spacing": "none",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "spacing: none",
                    "weight": "bolder",
                    "size": "medium"
                }
            ]
        },
        {
            "type": "Container",
            "spacing": "extraLarge",
            "separator": true,
            "items": [
                {
                    "type": "TextBlock",
                    "text": "spacing: extraLarge, separator: true",
                    "weight": "bolder",
                    "size": "medium"
                }
            ]
        }
    ]
}
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "Container Spacing", "size": "extraLarge" }, { "type": "Container", "spacing": "none", "items": [ { "type": "TextBlock", "text": "spacing: none", "weight": "bolder", "size": "medium" } ] }, { "type": "Container", "spacing": "extraLarge", "separator": true, "items": [ { "type": "TextBlock", "text": "spacing: extraLarge, separator: true", "weight": "bolder", "size": "medium" } ] } ] }
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