Design Guide: Components and Patterns
Four interaction patterns define how content is arranged and presented across Alexa surfaces. Don't invent alternatives: customers learn to scan and act on these shapes, and consistency is what makes Alexa+ feel coherent.
List
A vertical stack of items, top to bottom. Use it when presenting content in list format: shopping lists, calendar events, to-do items. It is optimized for homogeneous content where items share the same structure.
A List consists of an optional Header that contextualizes the content, optional Selection Controls (tabs to switch views, filter chips to refine), and the required item stack. On transcript surfaces — Echo Show, Mobile, Web — a "See More" button opens the full list in an overflow surface.
Common uses: media (music, audiobooks, movies), products (shopping, food ordering), points of interest, calendar events, to-do items, contacts, payment methods, devices, and settings.
Carousel
A horizontal row of items, left to right. Use it when presenting related content side by side: restaurants, events, stocks. Like the List, optimized for homogeneous content where users benefit from scanning across multiple items at once.
A Carousel consists of an optional Header, optional Selection Controls, and the required row of items laid out horizontally, with overflow accessible by scrolling.
Return 3 to 5 items in inline mode. Start delivering the first item within 500ms. If you can't hit that budget, reduce the initial set and lazy-load additional results behind a "See more" action. Put your strongest result first.
Common uses: detail rows (points of interest, shopping, events, news briefings, recipes) and text-only rows (stocks and indices).
Card
A single entity presented with an image and optional action buttons. Use it when one result warrants individual focus and you want to encourage the user to explore further. Best for browsing, comparing, and engaging with richer content: events, recipes, news articles, points of interest, movies, songs, and shopping results.
Two interactions are available on a card. Tapping the card itself is a navigation action. It transitions the user to a new or expanded view. Tapping a CTA ("call to action") is an inline or direct action. Reserve CTAs for actions that complete a task or goal, or that move the user forward.
Map
A ranked list of local points of interest alongside a map (provided by you) that plots their locations. Use it for location-based queries: restaurants, tourist attractions, entertainment venues.
Layout adapts to grid dimensions. When rows (Y) is greater than or equal to columns (X) plus 2, the POI list sits below the map (portrait). When rows (Y) is less than columns (X) plus 2, the list moves to the right of the map (landscape).
In compact (inline) mode, the map occupies the left and a ranked list of 3 results sits to the right. Each item shows a numbered badge matching the pin on the map, thumbnail, name, category, and walking distance. A "See More" button expands to fullscreen. Use compact as the default for any multi-result location query.
In expanded (fullscreen) mode, the map fills most of the width with the results list as a sidebar. Show 4 to 6 results. This is one of the valid fullscreen use cases, since the map pans and zooms.
If your service contains sponsored results or other sponsored design elements or interactions, surface them with a "Sponsored" label above the item name in textStyleBody2, muted — never as a badge on the image. Place them at position 2, never position 1. Numbered pins and list items always correspond; never use one without the other.
Shared interaction patterns
Some interactions are common across many add-ons, such as authenticating with your service (see Alexa+ MCP Authentication). Alexa handles these as standardized patterns so customers always experience a consistent, familiar flow regardless of which add-on triggers it. You don't need to build any UI for these interactions: Alexa manages the presentation and completion.
Closing the loop: Confirmations
Sometimes conversations with your MCP don't end when the speaking stops. Customers might inquire about the status of a task ("What hotel were we booked at for our Miami trip?"), you may need to send a confirmation email, or Alexa may send a notification to the customer.
Email confirmations
When your add-on completes a transaction, such as a booking, send a confirmation email. Best practices include:
- Send it promptly, within a few minutes of the completed action.
- Include key details such as what was confirmed, date/time, reference or booking ID, and total cost, taxes, and fees.
- Make it actionable: include a clear way to manage, modify, or cancel, plus a support contact.
- Match your branding: customers should recognize the email as coming from the same service they just used.
- Avoid plain-text dumps: format with a clear visual hierarchy.
See also Transaction Flow and Reservations & Bookings.
Alexa notifications
The quality of the notification Alexa sends to the customer's app depends on what your MCP returns. Return enough structured data for Alexa to generate a meaningful title and message.
Example: Returning {status: "confirmed", property: "Acme Hotel", check_in: "June 28", confirmation_number: "HDP-4892"} gives Alexa enough to craft a useful notification. Returning only {status: "success"} gives it almost nothing.
Answering follow-up questions
Customers regularly ask about past actions: "When did I book that dinner for?" "What hotel are we staying at?" Your tools must be able to return relevant confirmation data so Alexa can answer these recall questions. Include booking IDs, dates, property or venue names, and other key details in your responses.
Related topics
| Go back to: Visual Foundations | Next: Brand Expression |
Last updated: Jul 21, 2026
