Visual components Basic card

Basic card

Use basic cards (also called entity cards) to display an image and text to users.

Example Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Here’s an example of what a basic card looks like when all required and optional fields are completed.

This basic card, with all fields filled out, shows the history of how Google began. The foreground image is a photo of Sergey Brin and Larry Page in front of a computer in a cluttered garage. Title: From the garage to the Googleplex. Subtitle: Our story. Description: 10 lines of text describing how Google began. Action link: Read more.

Requirements Expand and collapse content An arrow that points down when collapsed and points up when expanded.

This visual component currently supports customization.

Field name

Required?

Restrictions/Customizations

Foreground image

Yes, required if there’s no description

Max 1 foreground image.

Width and height vary by screen. If the image's aspect ratio is different than the screen, the image is centered with bars along the top or sides.

Image source is a URL. If an image link is broken, then a placeholder image is used instead.

Customizable image shape (angled or rounded corners).

Motion GIFs are allowed.

Alt text is required for accessibility.

Card background

No

Customizable image or color.

Title

No

Customizable font family and color.

Max 1 line recommended.

The card height collapses if no title is specified.

Subtitle

No

Plain text. Fixed font and size.

Max 1 line recommended.

The card height collapses if no subtitle is specified.

Description

(also called body or formatted text)

Yes, required if there's no image

Plain text by default. Fixed font and size.

Bolding, italics, and new lines available via a limited subset of markdown.

Max 10 lines with an image. This is about 500 characters, depending on the screen. Additional characters will be cut off.
Max 15 lines without an image. This is about 750 characters, depending on the screen. Additional characters will be cut off.

Action link

No

1 link can be specified at the end of a text-card.

Links can lead directly to web pages or generate other visual components to advance the dialog. They can also be deep links to apps.

Link title is required and cannot be misleading. This is checked during the approval process.

Interactivity

  • The basic card has no interaction without action links—it only presents information.
  • With an action link added, users can tap it to view web content or advance the dialog.

Guidance Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Basic cards are used to describe entities (i.e. topics including people, places, or things)—they’re best used when a ‘definition-style’ response form factor is needed. Use them to summarize information or to provide additional, relevant information to the user.

Summarize information for the user

Persona: Ibento (fake ticket-seller). User input: When’s he coming to the city? Spoken prompt: He’s performing in San Francisco on May 15th. Do you want me to see if there are tickets available? Display prompt: On May 15th. Should I see if there are tickets available? Visual: Basic card. Foreground image is of a rapper onstage in silhouette. Title: NotARealRapper. Subtitle: Tuesday, May 15. 7:30 PM. Concert Hall. San Francisco, CA. Chips: Yes, No, Bay area concerts.

Do.

Summarize things like event details using a basic card. This allows users to scan it quickly for the information they want.

Persona: Ibento (fake ticket-seller). User input: When’s he coming to the city? Spoken prompt: He’s performing at the Concert Hall in San Francisco on Tuesday, May 15th at 7:30 PM. Do you want me to see if there are tickets available? Display prompt: On Tuesday, May 15 at 7:30 PM at the Concert Hall in San Francisco. Should I see if there are tickets available? Chips: Yes, No, Bay area concerts.

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

Persona: Google I/O 18. User input: When’s my next session? Spoken prompt: Your next session is at 11:30 AM. Do you need anything else? Display prompt: It’s at 11:30 AM. Anything else? Visual: Basic card. Title: Design actions for the Google Assistant: beyond smart speakers, to phones and smart displays. Subtitle: Wed. May 9, 11:30 AM – 12:30 PM (Stage 2). Description: 10 lines of text describing the content of the session. Chips: Get directions, Next event, Open I/O app.

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.

Persona: Google I/O 18. User input: When’s my next session? Spoken prompt: Your next session is at 11:30 AM. It’s called “Design Actions for the Google Assistant: beyond smart speakers, to phones and smart displays” and it’s happening at Stage 2. Display prompt: It’s starting at 11:30 AM at Stage 2. It’s called “Design Actions for the Google Assistant: beyond smart speakers, to phones and smart displays”. Visual: Basic card. Title: Design actions for the Google Assistant: beyond smart speakers, to phones and smart displays. Subtitle: Wed. May 9, 11:30 AM – 12:30 PM (Stage 2). Description: 10 lines of text describing the content of the session. Chips: Get directions, Next event, Open I/O app.

Don’t.

Avoid redundancy between the spoken prompt, display prompt, and visuals.

A picture is worth a thousand words

Persona: Miso flowers (fake flower shop). User input: What is a dahlia? Spoken prompt: Dahlias are fluffy, many-petaled flowers known for their star-like appearance and wide array of bright colors. Would you like to see our dahlia bouquets? Display prompt: Here’s an intro to dahlias. Would you like to see some of our dahlia bouquets? Visual: Basic card. Foreground image of a bouquet of different kinds of dahlias. Title: Dahlias. Subtitle: Scientific name: Dahlia, Family: Asteraceae. Description: 6 lines of text describing various traits of dahlias. Action link: Read more. Chips: Yes, no, similar flowers.

Do.

Sometimes an image is the best way to convey information to the user.

Persona: Miso flowers (fake flower shop). User input: What is a dahlia? Spoken prompt: Dahlias are fluffy, many-petaled flowers known for their star-like appearance and wide array of bright colors. Would you like to see our dahlia bouquets? Display prompt: Here’s an intro to dahlias. Would you like to see some of our dahlia bouquets? Visual: Basic card with no foreground image. Title: Dahlias. Subtitle: Scientific name: Dahlia, Family: Asteraceae. Description: 6 lines of text describing various traits of dahlias. Action link: Read more. Chips: Yes, no, similar flowers.

Don’t.

Though the description is nice, a picture would have been better.