Header
The Alexa header responsive component (AlexaHeader) displays common header information such as a title, subtitle, and back button.
Import the alexa-layouts package
To use AlexaHeader, import the alexa-layouts package.
The latest version of the alexa-layouts package is 1.1.0. AlexaHeader was introduced in version 1.0.0.
Use the Other Versions option at the top of this page to see documentation for different versions of AlexaHeader. The table of parameters notes the version of alexa-layouts in which each parameter was added.
AlexaHeader parameters
All parameters except type are optional.
| Name | Type | Default | Description | Version added |
|---|---|---|---|---|
|
|
String |
None |
URL for attribution image source. Only shown when |
1.0.0 |
|
|
Boolean |
true |
On devices that can only display one element due to screen size, Attribution is prioritized. Setting to |
1.0.0 |
|
|
String |
None |
Attribution text to render in the header. The |
1.0.0 |
|
|
String |
None |
An accessibility label to describe the back button to customers who use a screen reader. |
1.1.0 |
|
|
|
Command to execute when the user selects the back button. |
1.1.0 |
|
|
|
Boolean |
|
Toggle to display back button in header. |
1.0.0 |
|
|
String |
|
Optional color value to use as the background color for the Header. |
1.0.0 |
|
|
Boolean |
|
Toggle to display the divider that appears at the bottom of header to help separate it from the content below. |
1.1.0 |
|
|
String |
None |
Secondary text to render in header. |
1.0.0 |
|
|
String |
None |
Primary text to render in header. |
1.0.0 |
|
|
String |
|
Colors are switched depending on the specified theme (light/dark). |
1.1.0 |
|
|
String |
None |
Always set to |
1.0.0 |
headerAttributionText and headerAttributionImage parameters are provided, then headerAttributionImage is used.AlexaHeader example
{
"type": "AlexaHeader",
"headerBackButton": true,
"headerBackButtonAccessibilityLabel": "back",
"headerBackgroundColor": "red",
"headerTitle": "Header title",
"headerSubtitle": "Header subtitle",
"headerAttributionText": "Attribution",
"headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
"headerAttributionPrimacy": true,
"headerDivider": true
}
