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.6.0. AlexaHeader
was introduced in version 1.0.0.
AlexaHeader parameters
All parameters except type
are optional.
Name | Type | Default | Description | Version added |
---|---|---|---|---|
|
Array |
— |
Array of entity data to bind to this component. |
1.2.0 |
|
String |
&mdash |
URL for attribution image source. Displays when |
1.0.0 |
|
Number |
0.8 |
The opacity of the attribution text and attribution image. Set to a number between 0 and 1. |
1.3.0 |
|
Boolean |
true |
When true, display the |
1.0.0 |
|
String |
&mdash |
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 |
Back |
An accessibility label to describe the back button to customers who use a screen reader. |
1.1.0 |
|
|
Command to run 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 |
|
boolean |
false |
When |
1.6.0 |
|
String |
&mdash |
Secondary text to render in header. |
1.0.0 |
|
String |
&mdash |
Primary text to render in the header. |
1.0.0 |
|
String |
|
Specifies the layout direction for the content. Set this property to either |
1.4.0 |
|
String |
|
Set the dark or light color theme. The selected theme controls the colors used for the component. |
1.1.0 |
|
String |
&mdash |
Always set to |
1.0.0 |
headerAttributionText
and headerAttributionImage
parameters are provided, the document displays the headerAttributionImage
.AlexaHeader example
{
"type": "AlexaHeader",
"headerBackgroundColor": "red",
"headerTitle": "This is the header title",
"headerSubtitle": "This is the header subtitle",
"headerAttributionText": "Attribution text"
}