Class Card
A card interface displayed in a Google Chat message or Google Workspace add-on.
Cards support a defined layout, interactive UI elements like buttons, and rich media like images. Use cards to present detailed information, gather information from users, and guide users to take a next step.
To learn how to build cards, see the following documentation:
- For Google Chat apps, see Design the components of a card or dialog.
- For Google Workspace add-ons, see Card-based interfaces.
Note: You can add up to 100 widgets per card. Any widgets beyond this limit are ignored. This limit applies to both card messages and dialogs in Google Chat apps, and to cards in Google Workspace add-ons.
Example: Card message for a Google Chat app
To create the sample card message in Google Chat, use the following JSON:
{
"cardsV2": [
{
"cardId": "unique-card-id",
"card": {
"header": {
"title": "Sasha",
"subtitle": "Software Engineer",
"imageUrl":
"https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png",
"imageType": "CIRCLE",
"imageAltText": "Avatar for Sasha"
},
"sections": [
{
"header": "Contact Info",
"collapsible": true,
"uncollapsibleWidgetsCount": 1,
"widgets": [
{
"decoratedText": {
"startIcon": {
"knownIcon": "EMAIL"
},
"text": "sasha@example.com"
}
},
{
"decoratedText": {
"startIcon": {
"knownIcon": "PERSON"
},
"text": "<font color=\"#80e27e\">Online</font>"
}
},
{
"decoratedText": {
"startIcon": {
"knownIcon": "PHONE"
},
"text": "+1 (555) 555-1234"
}
},
{
"buttonList": {
"buttons": [
{
"text": "Share",
"onClick": {
"openLink": {
"url": "https://example.com/share"
}
}
},
{
"text": "Edit",
"onClick": {
"action": {
"function": "goToView",
"parameters": [
{
"key": "viewType",
"value": "EDIT"
}
]
}
}
}
]
}
}
]
}
]
}
}
]
}
Namespace: Google.Apps.Card.V1
Assembly: Google.Apps.Card.V1.dll
Syntax
public sealed class Card : IMessage<Card>, IEquatable<Card>, IDeepCloneable<Card>, IBufferMessage, IMessage
Constructors
Card()
Declaration
public Card()
Card(Card)
Declaration
public Card(Card other)
Parameters
Type | Name | Description |
---|---|---|
Card | other |
Properties
CardActions
The card's actions. Actions are added to the card's toolbar menu.
For example, the following JSON constructs a card action menu with
Settings
and Send Feedback
options:
"card_actions": [
{
"actionLabel": "Settings",
"onClick": {
"action": {
"functionName": "goToView",
"parameters": [
{
"key": "viewType",
"value": "SETTING"
}
],
"loadIndicator": "LoadIndicator.SPINNER"
}
}
},
{
"actionLabel": "Send Feedback",
"onClick": {
"openLink": {
"url": "https://example.com/feedback"
}
}
}
]
Declaration
public RepeatedField<Card.Types.CardAction> CardActions { get; }
Property Value
Type | Description |
---|---|
RepeatedField<Card.Types.CardAction> |
DisplayStyle
In Google Workspace add-ons, sets the display properties of the
peekCardHeader
.
Declaration
public Card.Types.DisplayStyle DisplayStyle { get; set; }
Property Value
Type | Description |
---|---|
Card.Types.DisplayStyle |
FixedFooter
The fixed footer shown at the bottom of this card.
Setting fixedFooter
without specifying a primaryButton
or a
secondaryButton
causes an error. For Chat apps, you can use fixed footers
in
dialogs, but not
card
messages.
Declaration
public Card.Types.CardFixedFooter FixedFooter { get; set; }
Property Value
Type | Description |
---|---|
Card.Types.CardFixedFooter |
Header
The header of the card. A header usually contains a leading image and a title. Headers always appear at the top of a card.
Declaration
public Card.Types.CardHeader Header { get; set; }
Property Value
Type | Description |
---|---|
Card.Types.CardHeader |
Name
Name of the card. Used as a card identifier in card navigation.
Declaration
public string Name { get; set; }
Property Value
Type | Description |
---|---|
string |
PeekCardHeader
When displaying contextual content, the peek card header acts as a placeholder so that the user can navigate forward between the homepage cards and the contextual cards.
Declaration
public Card.Types.CardHeader PeekCardHeader { get; set; }
Property Value
Type | Description |
---|---|
Card.Types.CardHeader |
SectionDividerStyle
The divider style between the header, sections and footer.
Declaration
public Card.Types.DividerStyle SectionDividerStyle { get; set; }
Property Value
Type | Description |
---|---|
Card.Types.DividerStyle |
Sections
Contains a collection of widgets. Each section has its own, optional header. Sections are visually separated by a line divider. For an example in Google Chat apps, see Define a section of a card.
Declaration
public RepeatedField<Card.Types.Section> Sections { get; }
Property Value
Type | Description |
---|---|
RepeatedField<Card.Types.Section> |