Display Cards

Display Cards are visual aids that complement the Alexa voice experience. There are several types of Display Cards available. These are provided through various templates described below.

Type Description Example Use Cases Auto Dismiss
BodyTemplate1 Text only with title, subtitle, text, and skill icons. Wikipedia entries without images, and simple cards provided by Alexa Skills. 8 seconds after inactivity
BodyTemplate2 Text and a single image. Wikipedia entries with images. 8 seconds after inactivity
ListTemplate1 Vertical scrolling list. Shopping lists, to-do lists, calendar entries and search results. 8 seconds after inactivity
WeatherTemplate Weather text and images. Daily and weekly forecast. 8 seconds after inactivity
LocalSearchListTemplate2 List of local search results Search results for business name or POI category 30 seconds after inactivity
LocalSearchDetailTemplate1 POI details Business details for a POI 30 seconds after inactivity
NowPlaying (RenderPlayerInfo) Media metadata, player controls and album art. Music, news, podcasts, audiobooks.. Does not dismiss automatically


Some Display Cards are purely informative. They supplement Alexa's verbal response, reinforcing that she understood your request, and provide additional details such as images, text and source attribution.

My alternative image text
BodyTemplate1
My alternative image text
BodyTemplate2

Other Display Cards are actionable and provide a secondary way for the customer to interact with Alexa. For example, when asking Alexa about nearby points of interest (POIs), Alexa will provide a list of destinations. The list items can be tapped and the destination should be sent to the navigation system.

My alternative image text
LocalSearchListTemplate2
My alternative image text
LocalSearchDetailTemplate1

(Required) Show Alexa display cards when available and while mobile projection applications are running or other virtual assistants are present (e.g. Android Auto or Apple CarPlay).

In order to provide customers with the best possible experience, it's important to support all of the available Display Cards and content from Alexa. For vehicles with displays, the following requirements and recommendations apply.

(Required) Show Display Cards when Alexa begins speaking.

Alexa's responses should not be delayed. Display Cards should be shown when Alexa begins speaking, however do not wait for elements including title, icons, text or images to download before initiating the verbal response.

(Required) Ensure content of cards match Alexa's verbal response.

Display Cards compliment what Alexa says. It's essential to keep cards in sync with verbal responses from Alexa.

(Required) Allow voice chrome to appear over Display Cards without obscuring the card below.

If you dim the display when showing Alexa voice chrome, ensure that the card's content is still legible. This is to support follow-up conversation with Alexa about the currently displayed card.

My alternative image text
Alexa voice chrome

(Required) Dismiss Display Cards according to following rules:

  1. Manual Dismiss: Dismiss the display card as soon as the User taps the ‘X’.
  2. Auto Dismiss: Display cards automatically dismiss 8 or 30 seconds after last interaction. Interactions include Alexa's response, user touch events, and user voice requests. Refer to the table at the beginning for time out details for each display card.
  3. New Display Card : Dismiss the previous display card content when an Alexa response requires a new display card.

(Required) Interrupt Alexa speaking when a customer manually dismisses a display card.

For example, smooth fades or sliding transitions when showing and hiding cards.

Styling

Alexa is intended to be integrated into your vehicle's IVI in a seamless way. Display Cards should be styled according to your own HMI's design language. The look and feel (fonts, colors, etc.) of Display Cards should match that of your IVI.

Global elements

Display Cards (except NowPlaying) require the following global elements.

  1. Title: All cards have a mainTitle and most will have a subTitle.
  2. Alexa Smile logo: Always show the Alexa logo on Display Cards.
  3. Alexa Skill Icon: When a skill provides it, display the Skill Icon.
  4. Close button: Provide a way for the customer to dismiss the card or return to a previous card. For example use a back arrow, close or “X” button. End Alexa's verbal response the moment a card is dismissed.

Note: The Alexa smile logo and back or close button elements are not included in the JSON and must be added.

My alternative image text

BodyTemplate1

BodyTemplate1 is used for Q&A, Wikipedia queries, and skills requests that do not contain a photo. Sample utterances that would invoke BodyTemplate1 include:

  1. "How many miles in a kilometer?"
  2. “What is the definition of “paradox”?”
My alternative image text
BodyTemplate1

BodyTemplate2

BodyTemplate2 is similar to BodyTemplate1 but also returns an image. Sample utterances that would invoke BodyTemplate2 include:

  1. “How deep is the ocean?”
  2. “How fast is Usain Bolt?”
My alternative image text
BodyTemplate2

Note: In some cases, not all of the body content (textField) will fit on screen. Use an ellipsis or fade-out to indicate more content is available. As an alternative, when the vehicle is in park, provide the option to scroll to full text.

You may choose to restrict the number of lines of text shown and whether images are displayed while driving. However attribution to Alexa and skills must be displayed. When the vehicle is in park, we recommend supporting display of the full text and images sent by Alexa.

See UI text guidelines for more information on handling truncation of text.

ListTemplate1

ListTemplate1 is used to display items in a list, such as a calendar or shopping list. Sample utterances that invoke ListTemplate1 include:

  1. “What’s on my To-do list?”
  2. “Add eggs to my shopping list.”
  3. “When is my next event?”

(Required) Number list items in non-calendar lists.

My alternative image text
ListTemplate1 - To-do list “Alexa, what's on my To-do list?”
My alternative image text
ListTemplate1 - Shopping list “Alexa, what's on my shopping list?”
My alternative image text
ListTemplate1 - Calendar “Alexa, what's on my agenda?”

LocalSearchListTemplate2

LocalSearchListTemplate2 is used to display interactive list of search results for a navigation query. Sample utterances that invoke LocalSearchListTemplate2 include:

  1. “What’s the closest coffee shop?”
  2. “Show me restaurants in San Francisco.”

(Required) Display all meta-data including content attribution and assets as described in the image below.

My alternative image text
LocalSearchListTemplate2 - “Alexa, what's the closest coffee shop?”

LocalSearchDetailTemplate1

LocalSearchDetailTemplate1 is used to display interactive detail information for a specific point of interest. This template is displayed in response to a specific POI / business location query. User can also navigate to this card by tapping on a list item within the LocalSearchListTemplate2 shown above. Sample utterances that invoke LocalSearchDetailTemplate1 include:

  1. “What are the hours for Taco Bell”
  2. “Show me Red Rock Coffee in Mountain View.”

(Required) Display all meta-data including content attribution as described in the image below.

My alternative image text
LocalSearchListTemplate2 - “LocalSearchDetailTemplate1 - “Alexa, select the first one”

WeatherTemplate

WeatherTemplate is used with all weather-related utterances, such as:

  1. “What’s the weather?”
  2. “How's the weather in San Francisco?”
My alternative image text
WeatherTemplate
My alternative image text
WeatherTemplate

NowPlaying

My alternative image text
NowPlaying

See Media services for details on media player implementations.