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.
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.
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:
Titles support Alexa's verbal response to an action such as a task, or announcing items on the screen.
Additional information that corresponds with the title can be included as a subtitle. Subtitles must be in title case.
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.
- 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.