Header
The Alexa header responsive component (AlexaHeader
) displays common header information such as a title, subtitle, and back button.
Compatibility
AlexaHeader
is designed to work with the following viewport profiles:
- The following widget viewport profiles in the
alexa-viewport-profiles
package:- Widget Medium (
@hubWidgetMedium
)
- Widget Medium (
- All standard viewport profiles in the
alexa-viewport-profiles
package:- All hub round profiles
- All hub landscape profiles
- All hub portrait profiles
- All mobile profiles
- All TV profiles
For details about viewport profiles, see Viewport Profiles.
If you use AlexaHeader
on an unsupported viewport, you might have unexpected results.
Differences for widgets
When used within a widget, AlexaHeader
displays a simplified header to accommodate the small widget size. The header has the following characteristics:
- The header displays header title text, but not attribution text, attribution images, or subtitles.
- The header doesn't support the 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.7.0. AlexaHeader
was introduced in version 1.0.0.
AlexaHeader parameters
The following table shows the parameters you can set on AlexaHeader
. Unless otherwise noted, standard viewport profiles support all parameters. The "Widget support" column indicates the widget viewport profiles that support each parameter. For details about viewport profiles, see Viewport Profiles.
All parameters except type
are optional.
Name | Type | Default | Description | Widget support | Version added |
---|---|---|---|---|---|
|
Array |
— |
Array of entity data to bind to this component. |
Medium |
1.2.0 |
|
String |
— |
URL for attribution image source. Displays when |
Not supported |
1.0.0 |
|
Number |
|
The opacity of the attribution text and attribution image. Set to a number between 0 and 1. |
Not supported |
1.3.0 |
|
Boolean |
|
When |
Not supported |
1.0.0 |
|
String |
— |
Attribution text to render in the header. Shown when |
Not supported |
1.0.0 |
|
Boolean |
|
When |
Not supported |
1.0.0 |
|
String |
|
An accessibility label to describe the back button to customers who use a screen reader. |
Not supported |
1.1.0 |
|
|
Command to run when the user selects the back button. |
Not supported |
1.1.0 | |
|
String |
|
Optional color value to use as the background color for the header. |
Medium |
1.0.0 |
|
Boolean |
|
When |
Not supported |
1.1.0 |
|
boolean |
|
When |
Medium |
1.6.0 |
|
String |
— |
Secondary text to render in header. |
Not supported |
1.0.0 |
|
String |
— |
Primary text to render in the header. |
Medium |
1.0.0 |
|
Boolean |
|
When |
Medium |
1.5.0 |
|
String |
|
Specifies the layout direction for the content. Set this property to either |
Medium |
1.4.0 |
|
String |
|
Set the dark or light color theme. The selected theme controls the colors used for the component. |
Medium |
1.1.0 |
|
String |
— |
Always set to |
Medium |
1.0.0 |
headerAttributionText
and headerAttributionImage
parameters are provided, the document displays the headerAttributionImage
.When both the Title/Subtitle and Attribution properties are provided, and headerHorizontalAlignmentCentered
is set to true
- If
headerAttributionPrimacy
is set totrue
, only the Attribution is displayed. - If
headerAttributionPrimacy
is set tofalse
, only Title/Subtitle is displayed.
AlexaHeader examples
{
"type": "AlexaHeader",
"headerBackgroundColor": "red",
"headerTitle": "This is the header title",
"headerSubtitle": "This is the header subtitle",
"headerAttributionText": "Attribution text"
}
The following example of AlexaHeader
uses the widget-only headerTitleCanUseTwoLines
property to display a longer header in a widget.
{
"type": "AlexaHeader",
"headerBackgroundColor": "red",
"headerTitle": "Long headerTitle text that uses 2 lines on a widget",
"headerTitleCanUseTwoLines": true
}
Related topics
- Alexa Design System Overview
- Responsive Components and Templates
- Combine Content with Backgrounds, Borders, and Headers
- Alexa Design Guide: Responsive Components
Last updated: Dec 06, 2023