Image List Item

accessibilityLabel

String

"[ordinal] [imageAltText] [primaryText] [secondaryText] [tertiaryText/ratings]"

A string describing the list item. Voice over reads this string when the user selects the item.

Not supported

1.4.0

contentDirection

String

column

The image and text content direction. Set to column or row.

Not supported

1.4.0

defaultImageSource

String

URI a default image to use when imageSource isn't provided. Provide a defaultImageSource to make sure that image containers are never empty.

Not supported

1.1.0

emptyRatingGraphic

Any

empty

The graphic to display to represent an 'empty' rating slot (such as an empty star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

Not supported

1.2.0

entities

Array

—

Array of entity data to bind to this component.

Not supported

1.2.0

fullRatingGraphic

Any

full

The graphic to display to represent a 'full' rating slot (such as a full star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

Not supported

1.2.0

halfRatingGraphic

Any

half

The graphic to display to represent a 'half' rating slot (such as a half star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

Not supported

1.2.0

hasPlayIcon

Boolean

false

When true, display a "play" icon in front of the secondaryText.

Not supported

1.2.0

hideDivider

Boolean

true

Toggle to hide the divider that appears at the bottom/right of each 'Horizontal Item Lockup' item to help separate it from the next content. Default to true.

Not supported

1.6.0

hideOrdinal

Boolean

false

When true, don't display a number next to the list item.

Not supported

1.1.0

imageAlignment

String

center

Determines how to position the image within the bounding box. Used when the image is smaller than the bounding box. Options are bottom, bottom-left, bottom-right, center, left, right, top, top-left, top-right. This property works the same as the imageAlignment property for the AlexaImage responsive component.

Not supported

1.1.0

imageAltText

String

—

Alternate text for the image. Voice over reads this string.

Not supported

1.4.0

imageAspectRatio

String

square

Aspect ratio to use for the image bounding box for the item. Options are square, round, standard_landscape, standard_portrait, poster_landscape, poster_portrait, widescreen. This property works the same as the imageAspectRatio property for the AlexaImage responsive component except that the height and width of the bounding box are pre-defined based on the aspect ratio and can't be changed.

Not supported

1.1.0

imageBlurredBackground

Boolean

false

When true, display a blurred version of the image behind the image. Ignored when imageScale is set to fill or best-fill. This property works the same as the imageBlurredBackground property for the AlexaImage responsive component.

Not supported

1.1.0

imageHeight

Dimension

—

Height of the image bounding box for the image. The image is scaled to fit within this height using the imageScale setting.

When imageHeight isn't set, the bounding box for the image uses a default width and calculates the height based on the selected imageAspectRatio.

When imageHeight is set, the bounding box for the image uses the specified height and a default width based on the selected imageAspectRatio. The resulting image then might not match the specified imageAspectRatio. For best results, set imageAspectRatio to the shape you want and leave imageHeight not set.

This property is ignored when you use AlexaImageListItem within an AlexaImageList. The AlexaImageList template sets imageHeight and all list items have the same image height.

Not supported

1.2.0

imageHideScrim

Boolean

false

When true, hide the overlay (scrim) between image and text content.

Not supported

1.1.0

imageMetadataPrimacy

Boolean

false

When true, prioritize secondaryText and tertiaryText over hintText on devices that can display one element due to screen size. When false, secondaryText, and tertiaryText are hidden on small screens.

Not supported

1.1.0

imageProgressBarPercentage

Number

0

When set to a number from 1 to 100, display a progress bar on the image based on the provided percentage. This gives the user a glanceable status for the item. The progress bar displays when imageShowProgressBar is true and the imageProgressBarPercentage parameter is set to a value greater than 0. The progress bar doesn't display when the imageAspectRatio is round.

Not supported

1.1.0

imageRoundedCorner

Boolean

true

When true, use rounded corners for the image.

Not supported

1.1.0

imageScale

String

best-fit

Determines how to scale the image to fit within the bounding box. Options are none, fill, best-fit, best-fill, best-fit-down. This property works the same as the imageScale property for the AlexaImage responsive component.

Not supported

1.1.0

imageShadow

Boolean

true

When true, display a drop shadow behind the image.

Not supported

1.3.0

imageShowProgressBar

Boolean

true

Toggle to display the progress bar on the image overlay. The progress bar displays when imageShowProgressBar is true and the imageProgressBarPercentage parameter is set to a value greater than 0. The progress bar doesn't display when the imageAspectRatio is round.

Not supported

1.1.0

imageSource

String

URI for the image to display.

Not supported

1.1.0

layoutDirection

String

${environment.layoutDirection}

Specifies the layout direction for the content. Set this property to either LTR (left-to-right) or RTL (right-to-left). This property doesn't inherit the layoutDirection from the component's parent container. Therefore, explicitly set this property when needed.

For more details about support for right-to-left languages in the responsive components, see Support for Right-to-left Languages.

Not supported

1.4.0

primaryAction

Command

The action to trigger when the user selects the list item.

Not supported

1.1.0

primaryText

String

Primary text to display for the list item.

Not supported

1.1.0

providerText

String

Provider text to display over the image.

Not supported

1.1.0

ratingGraphicType

String

AVG

The type of graphic to use for the rating. Set to AVG or image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

Not supported

1.2.0

ratingNumber

Number

—

The numeric rating between 0 and 5. Used when ratingSlotMode is multiple.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

Not supported

1.2.0

ratingSlotMode

String

—

Determines whether to display a single graphical asset for the rating, or build the rating from multiple image assets. When set to single, provide a single graphical asset in the singleRatingGraphic property. When multiple, provide the numeric rating in ratingNumber.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

Not supported

1.2.0

ratingText

String

—

Text to display next to the rating.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

Not supported

1.2.0

secondaryText

String

Secondary text for the list item.

Not supported

1.1.0

singleRatingGraphic

Any

—

The graphic to display to represent the rating. Used when ratingSlotMode is single. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

Not supported

1.2.0

singleRatingGraphicWidth

Dimension

—

The width of the bounding box for the single graphic that represents the rating. Used when ratingSlotMode is single.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

Not supported

1.2.0

speech

Any

—

Content to speak with the SpeakItem or SpeakList command. Must be the output of the textToSpeech or ssmlToSpeech transformer.

Not supported

1.2.0

tertiaryText

String

Tertiary text for the list item.

Not supported

1.1.0

theme

String

dark

Set the dark or light color theme. The selected theme controls the colors used for the component.

Not supported

1.1.0