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.2.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/updated |
---|---|---|---|---|
|
String |
None |
URL for attribution image source. Displays when |
1.0.0 |
|
Boolean |
true |
When true, display the |
1.0.0 |
|
String |
None |
Attribution text to render in the header. Shown when |
1.0.0 |
|
Boolean |
|
When true, display a back button in the header. |
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 |
|
|
String |
|
Optional color value to use as the background color for the header. |
1.0.0 |
|
Boolean |
|
When true, display a divider below the header to help separate it from content. |
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 |
|
Set the dark or light color theme. The selected theme controls the colors used for the component. |
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
}