Text List Item (1.2.0 - 1.3.0)

(This is not the most recent version of AlexaTextListItem. Use the Other Versions option to see the documentation for the most recent version of AlexaTextListItem)

The Alexa text list item responsive component (AlexaTextListItem) displays text, formatted to display within a list.

Import the alexa-layouts package

To use AlexaTextListItem, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaTextListItem was introduced in version 1.1.0.

Use the Other Versions option at the top of this page to see documentation for different versions of AlexaTextListItem. The table of parameters notes the version of alexa-layouts in which each parameter was added.

AlexaTextListItem parameters

All parameters except type are optional.

Name Type Default Description Version added/updated

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

entities

Array

—

Array of entity data to bind to this component.

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

hideDivider

Boolean

false

When true, hide the horizontal divider displayed below the list item.

1.1.0

hideHorizontalMargin

Boolean

false

When true, hide the default left and right padding.

1.2.0

hideOrdinal

Boolean

false

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

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.2.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.2.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.2.0

imageThumbnailShadow

Boolean

true

When true, display a drop shadow behind the image thumbnail.

1.3.0

imageThumbnailSource

String

—

URI for an image to display next to the list item as a thumbnail.

1.2.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

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

-1

A numeric rating between 0 and 5. When set to a positive number, displays the number as a star rating. Set to a negative number or omit to leave off the rating.

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. Ignored when ratingNumber is a negative number or omitted.

1.2.0

secondaryText

String

—

Secondary text for each list item.

1.2.0

secondaryTextPosition

String

bottom

The position to display the secondaryText. Set to top or bottom. The secondaryText aligns to the start of the primaryText.

1.2.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

tertiaryText

String

—

Tertiary text for each list item.

1.2.0

tertiaryTextPosition

String

right

The position to display the tertiaryText. Set to bottom or right. When set to right, the tertiaryText displays above and to the right of the primaryText. When set to bottom, the tertiaryText displays below the primaryText and is left-aligned with the primaryText.

1.2.0

theme

String

dark

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

1.1.0

touchForward

Boolean

false

When true, assume the user is close enough to touch the screen (3-foot viewing distance) and format the list item with a smaller font size. When false, assume the user isn't close enough to touch the screen ("voice-forward") and use a larger font size.

1.2.0

type

String

—

Always set to AlexaTextListItem.

1.1.0

AlexaTextListItem example

This example illustrates an AlexaTextListItem with primaryText, secondaryText, and tertiaryText.

{
  "type": "AlexaTextListItem",
  "primaryText": "This is the primary text. It can wrap to multiple lines as needed",
  "secondaryText": "This is the secondary text",
  "secondaryTextPosition": "top",
  "tertiaryText": "Tertiary text",
  "tertiaryTextPosition": "right",
  "touchForward": true
}
AlexaTextListItem
AlexaTextListItem

This example illustrates AlexaTextListItem with a thumbnail graphic and a rating. Note that both the secondaryText and tertiaryText display on the bottom.

{
  "type": "AlexaTextListItem",
  "primaryText": "This is the primary text. It can wrap to multiple lines as needed",
  "secondaryText": "This is the secondary text",
  "secondaryTextPosition": "bottom",
  "tertiaryText": "This is the tertiary text",
  "tertiaryTextPosition": "bottom",
  "ratingNumber": 2,
  "ratingText": "Rating text",
  "touchForward": true,
  "imageThumbnailSource": "https://d2o906d8ln7ui1.cloudfront.net/images/md_brie.png",
  "hideOrdinal": true
}
AlexaTextListItem with a thumbnail graphic
AlexaTextListItem with a thumbnail graphic

For an example of using AlexaTextListItem in a list, see AlexaTextList.

Was this page helpful?

Last updated: Nov 28, 2023