Card section

The CardSection widget is a high-level container within a card. You use card sections to group widgets within a card. For each card section, you can include a header and one or more widgets.

You can include sections for card messages and dialogs.

Example

The following image displays a card consisting of a CardSection component.

A card message in Google Chat depicting a collapsible CardSection.
Figure 1: A card message in Google Chat depicting CardSection displaying a header and two TextParagraph widgets. The second text paragraph is collapsed.

Here's the card's JSON:

JSON

{
  "cardsV2": [
    {
      "cardId": "card_one",
      "card": {
        "sections": [
          {
          "header": "List of Collapsible Text Paragraphs",
          "collapsible": true,
          "uncollapsibleWidgetsCount": 1,
          "widgets": [
            {
              "textParagraph": {
                "text": "This is a normal test string 1",
              }
            },
            {
              "textParagraph": {
                "text": "This is a normal test string 2",
              }
            }
          ]
        }]
      }
    }
  ]
}

JSON representation and fields

JSON representation 
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer
}
Fields
header

string

Text that appears at the top of a section. Supports simple HTML formatted text. For more information about formatting text, see Formatting text in Google Chat apps and Formatting text in Google Workspace Add-ons.

widgets[]

object (Widget)

All the widgets in the section. Must contain at least one widget.

collapsible

boolean

Indicates whether this section is collapsible.

Collapsible sections hide some or all widgets, but users can expand the section to reveal the hidden widgets by clicking Show more. Users can hide the widgets again by clicking Show less.

To determine which widgets are hidden, specify uncollapsibleWidgetsCount.

uncollapsibleWidgetsCount

integer

The number of uncollapsible widgets which remain visible even when a section is collapsed.

For example, when a section contains five widgets and the uncollapsibleWidgetsCount is set to 2, the first two widgets are always shown and the last three are collapsed by default. The uncollapsibleWidgetsCount is taken into account only when collapsible is true.

Widget

Each card is made up of widgets.

A widget is a composite object that can represent one of text, images, buttons, and other object types.

JSON representation 
{
  "horizontalAlignment": enum (HorizontalAlignment),

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  },
  "columns": {
    object (Columns)
  }
  // End of list of possible types for union field data.
}
Fields
horizontalAlignment

enum (HorizontalAlignment)

Specifies whether widgets align to the left, right, or center of a column.

Union field data. A widget can only have one of the following items. You can use multiple widget fields to display more items. data can be only one of the following:
textParagraph

object (TextParagraph)

Displays a text paragraph. Supports simple HTML formatted text. For more information about formatting text, see Formatting text in Google Chat apps and Formatting text in Google Workspace Add-ons.

For example, the following JSON creates a bolded text: 

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object (Image)

Displays an image.

For example, the following JSON creates an image with alternative text: 

"image": {
  "imageUrl":
  "https://developers.google.com/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}
decoratedText

object (DecoratedText)

Displays a decorated text item.

For example, the following JSON creates a decorated text widget showing email address: 

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "text": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchControl": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "CHECKBOX"
  }
}
buttonList

object (ButtonList)

A list of buttons.

For example, the following JSON creates two buttons. The first is a blue text button and the second is an image button that opens a link: 

"buttonList": {
  "buttons": [
    {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
        "alpha": 1
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
textInput

object (TextInput)

Displays a text box that users can type into.

For example, the following JSON creates a text input for an email address: 

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

As another example, the following JSON creates a text input for a programming language with static suggestions: 

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object (SelectionInput)

Displays a selection control that lets users select items. Selection controls can be checkboxes, radio buttons, switches, or dropdown menus.

For example, the following JSON creates a dropdown menu that lets users choose a size: 

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object (DateTimePicker)

Displays a widget that lets users input a date, time, or date and time.

For example, the following JSON creates a date time picker to schedule an appointment: 

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DATE_AND_TIME",
  "valueMsEpoch": "796435200000"
}
divider

object (Divider)

Displays a horizontal line divider between widgets.

For example, the following JSON creates a divider: 

"divider": {
}
grid

object (Grid)

Displays a grid with a collection of items.

A grid supports any number of columns and items. The number of rows is determined by the upper bounds of the number items divided by the number of columns. A grid with 10 items and 2 columns has 5 rows. A grid with 11 items and 2 columns has 6 rows.

For example, the following JSON creates a 2 column grid with a single item: 

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
columns

object (Columns)

Displays up to 2 columns.

To include more than 2 columns, or to use rows, use the Grid widget.

For example, the following JSON creates 2 columns that each contain text paragraphs: 

"columns": {
  "columnItems": [
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "First column text paragraph"
          }
        }
      ]
    },
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "Second column text paragraph"
          }
        }
      ]
    }
  ]
}