Basic card
Example
Here’s an example of what a basic card looks like when all required and optional fields are completed.
![](https://developers.google.cn/static/assistant/conversation-design/images/basiccardmapped.png?authuser=9)
Requirements
This visual component currently supports customization.
Field name | Required? | Restrictions/Customizations |
---|---|---|
Foreground image | Yes, required if there’s no description |
|
Card background | No |
|
Title | No |
|
Subtitle | No |
|
Description (also called body or formatted text) |
Yes, required if there's no image |
|
Action link | No |
|
Guidance
Summarize information for the user
![](https://developers.google.cn/static/assistant/conversation-design/images/summarize-do.png?authuser=9)
Do.
Summarize things like event details using a basic card. This allows users to scan it quickly for the information they want.
![](https://developers.google.cn/static/assistant/conversation-design/images/summarize-dont.png?authuser=9)
Don't.
It’s less efficient to present information like event details in the prompts.
Give the short answer in the prompts and the related details in the card
![](https://developers.google.cn/static/assistant/conversation-design/images/put-deets-in-card-do.png?authuser=9)
Do.
Use the spoken and display prompts to give the specific answer to the user’s directed question (11:30 AM in this example). Use the visuals for related details.
![](https://developers.google.cn/static/assistant/conversation-design/images/put-deets-in-card-dont.png?authuser=9)
Don't.
Avoid redundancy between the spoken prompt, display prompt, and visuals.
A picture is worth a thousand words
![](https://developers.google.cn/static/assistant/conversation-design/images/usingpics-do.png?authuser=9)
Do.
Sometimes an image is the best way to convey information to the user.
![](https://developers.google.cn/static/assistant/conversation-design/images/usingpics-dont.png?authuser=9)
Don't.
Though the description is nice, a picture would have been better.