Design dynamic, interactive, and consistent UIs with cards

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

Chat apps feature a card-based interface for showing information to and collecting information from users.

Cards

Chat apps can send card messages instead of text messages in conversation, or open cards as windows called dialogs. Cards support a defined layout, interactive UI elements like buttons, and rich media like images.

In Google Chat, cards appear in several places:

  • As stand-alone card messages.
  • Attached to a text message, such as a link preview that gives more information and lets people take action right from Google Chat.
  • As a dialog that Chat apps open to interact with users, collect data, and complete multi-step processes like authentication or configuring app settings.

For example, a Chat app might use a card message to run a poll in a Chat space:

A Chat app running a poll in a Chat space using a card message

Or open a dialog to help a user create a new contact for their address book:

A dialog featuring a variety of different widgets.

The benefits of card-based interfaces and messages in Google Chat are the following:

  • Interactive: Cards facilitate user interactions with buttons, text input fields, and datetime widgets.
  • Consistent: Cards and widgets ensure that your Chat app looks and feels consistent across different platforms, including web and mobile devices. Cards and widgets are automatically styled to work well with Google Chat.
  • Dynamic: Connect data to cards and widgets to dynamically display information to users. For example, a card can present a customer case with the latest status.

Widgets

Each card consists of a header and one or more card sections. Each section contains one or more widgets. Widgets let you do the following:

  • Display information, like text and images, to users.
  • Collect information from users with text-input fields, selectable menus, and datetime settings.
  • Provide interaction controls, like buttons.

The following widgets are supported in card messages and dialogs:

  • TextParagraph–Displays a paragraph of text with optional simple HTML formatting.
  • Image–Displays a clickable or static .png or .jpg image hosted on an HTTPS URL.
  • DecoratedText–Displays text with optional layout and functionality features, like icons and buttons.
  • ButtonList–Displays a set of buttons.

The following widgets are supported in dialogs (support for card messages coming soon):

  • TextInput–Field in which users can enter text.
  • SelectionInput–Provides a set of selectable items, like a list of checkboxes, radio buttons, switches, or a dropdown menu.

  • Divider–Displays a horizontal line spanning the width of a card between stacked widgets, acting as a visual divider.

  • Grid–Lays a set of items out in a simple grid.

Support for the following widget is coming soon: