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.
Note: Do not display empty lists.
| 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 customers' request is understood and provide additional details such as images, text and source attribution.
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.
(Required) Show Alexa display cards when available and while mobile projection applications are running or other virtual assistants are present (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.
(Required) Dismiss Display Cards according to following rules:
- Manual Dismiss: Dismiss the display card when the customer taps the X.
- 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.
- 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.
(Recommended) Use smooth transitions when displaying and dismissing cards.
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 and colors) of Display Cards should match that of your IVI.
Global elements
Display Cards (except NowPlaying) require the following global elements.
- Title: All cards have a mainTitle and most will have a subTitle.
- Alexa Smile logo: Always show the Alexa logo on Display Cards.
- Alexa Skill Icon: When a skill provides it, display the Skill Icon.
- 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 . 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.
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:
- "How many miles in a kilometer?"
- “What is the definition of “paradox”?”
BodyTemplate2
BodyTemplate2 is similar to BodyTemplate1 but also returns an image. Sample utterances that would invoke BodyTemplate2 include:
- “How deep is the ocean?”
- “How fast is Usain Bolt?”
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.
(Recommended) When the vehicle is in motion, limit the number of lines of 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 for the calendar.
LocalSearchListTemplate2
LocalSearchListTemplate2 is used to display interactive list of search results for a navigation query. Sample utterances that invoke LocalSearchListTemplate2 include:
- “What’s the closest coffee shop?”
- “Show me restaurants in San Francisco.”
(Required) Display all meta-data including content attribution and assets as described in the image below.
(Recommended) If possible, provide the contents of this display card within your embedded navigation application with relevant map data and appropriate source attribution including Alexa.
(Required) Provide Back button on Local Search Detail when ingress was Local Search List Template 2. Back button allows customers to return to the Local Search List.
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 or 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:
- “What are the hours for Taco Bell”
- “Show me Red Rock Coffee in Mountain View.”
(Required) Display all meta-data including content attribution as described in the image below.
(Recommended) If possible, provide the contents of this display card within your embedded navigation application with relevant map data and appropriate source attribution including Alexa.
WeatherTemplate
WeatherTemplate is used with all weather-related utterances, such as:
- “What’s the weather?”
- “How's the weather in San Francisco?”
NowPlaying (Only when there is no Native Media Player)
Provide NowPlaying Display Card only if no native media player is available when customers are engaging media through Alexa. See Media services for details on media player implementations.
Last updated: Nov 25, 2023