CardHeader

Stay organized with collections Save and categorize content based on your preferences.

CardHeader 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.

A card message in Google Chat depicting a CardHeader.
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",
        },
      }
    }
  ]
}

CardHeader JSON representation and fields

Represents a card header.

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 which is 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.