Card header

The CardHeader widget represents the header of a card. Headers can include a title, subtitle, and avatar-style image.

You can include headers for card messages and dialogs.

Example

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

Figure 1: A card message in Google Chat depicting CardHeader displaying a title, subtitle, and icon.

Here's the card's JSON:

JSON

{
  "cardsV2": [
    {
      "cardId": "card_one",
      "card": {
        "header": {
          "title": "Header",
          "subtitle": "Subtitle",
          "imageType": "SQUARE",
          "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png",
          "imageAltText": "Avatar for the card header",
        },
      }
    }
  ]
}

JSON representation and fields

JSON representation
{ "title": string, "subtitle": string, "imageType": enum (ImageType), "imageUrl": string, "imageAltText": string }

Fields
title	string Required. The title of the card header. The header has a fixed height: if both a title and subtitle are specified, each takes up one line. If only the title is specified, it takes up both lines.
subtitle	string The subtitle of the card header. If specified, appears on its own line below the title.
imageType	enum (ImageType) The shape used to crop the image.
imageUrl	string The HTTPS URL of the image in the card header.
imageAltText	string The alternative text of this image that's used for accessibility.

ImageType

The shape used to crop the image.

Enums
SQUARE	Default value. Applies a square mask to the image. For example, a 4x3 image becomes 3x3.
CIRCLE	Applies a circular mask to the image. For example, a 4x3 image becomes a circle with a diameter of 3.