Image List Item (1.4.0 - 1.5.0)

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.

1.4.0

contentDirection

String

column

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

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.

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.

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.

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.

1.2.0

hasPlayIcon

Boolean

false

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

1.2.0

hideOrdinal

Boolean

false

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

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.

1.1.0

imageAltText

String

—

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

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.

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.

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.

1.2.0

imageHideScrim

Boolean

false

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

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.

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.

1.1.0

imageRoundedCorner

Boolean

true

When true, use rounded corners for the image.

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.

1.1.0

imageShadow

Boolean

true

When true, display a drop shadow behind the image.

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.

1.1.0

imageSource

String

URI for the image to display.

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.

1.4.0

primaryAction

Command

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

1.1.0

primaryText

String

Primary text to display for the list item.

1.1.0

providerText

String

Provider text to display over the image.

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.

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.

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.

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.

1.2.0

secondaryText

String

Secondary text for the list item.

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.

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.

1.2.0

speech

Any

—

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

1.2.0

tertiaryText

String

Tertiary text for the list item.

1.1.0

theme

String

dark

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

1.1.0