Thank you for your visit. This page is only available in English at this time.

Header

The header responsive component is used to consistently display contextually relevant information to the skill. This can include navigational information such as the title, subtitle, skill attribution (text or icon), and back button.

Layouts Package

The design recommendations in the guide reference the Layouts Package, which is an additional set of properties that you will need to import to use responsive components in your skill. Check out Alexa Layouts Package for more information.

Image of a round and square hub device displaying the Space skill logo and additional information at the top of the screen

How to use the header component

Always use the header responsive component in your skill to display titles and subtitles, even if you don't use the other attributes for your skill. For small screens, the header can be inside of the scrolling content to maximize screen real estate. For medium or larger screens, the header should be placed outside of scrolling content at the full width of the screen. This way, the header remains fixed while the rest of the content can scroll.

Use the following properties to customize your header:

Title

Titles support Alexa's verbal response to an action such as a task, or announcing items on the screen.

Subtitle

Additional information that corresponds with the title can be included as a subtitle. Subtitles must be in title case.

Attribution

Attributions display your skill name, icon or associated imagery. The header can display either image or text as the attribution. In the case that both are provided, the image will be displayed. On smaller displays, an image or skill icon will be shown instead of the title and subtitle. If you would prefer to show the title and subtitle instead, set the attribution icon to “true”.

Most commonly a back button, navigational elements should be displayed if your experience supports requests such as, “Alexa, go back.” The back button should only be shown if you want the customer to return to the previous screen at any time, and would provide a linked touch target for use in addition to the utterance.

Best practices

  • Headers should be contextually relevant, displaying titles and subtitles that are related to the rest of the visual response.
  • Place the Header outside of any scrolling views (layouts or components) to make it sticky, so it does not scroll itself. A persistent Header will allow customers to access navigation, as well as help maintain the context of the content being displayed.

Additional resources


Back to top