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.

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 (
|
Fields | |
---|---|
title
|
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
|
The subtitle of the card header. If specified, appears on its own line below the
|
imageType
|
The shape used to crop the image. |
imageUrl
|
The HTTPS URL of the image in the card header. |
imageAltText
|
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. |