Ordinal

The Alexa ordinal responsive component (AlexaOrdinal) displays the number of a list item. It is intended to be used to number list items in a component with multiple child components (such as a Sequence, Container, or Pager.

• Import the alexa-layouts package
• AlexaOrdinal parameters
• Display numbering
• AlexaOrdinal example
• Related topics

Import the alexa-layouts package

To use AlexaOrdinal, import the alexa-layouts package.

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

AlexaOrdinal parameters

All parameters except type are optional.

Display numbering

AlexaOrdinal uses the ordinal property in the data-binding context to display the list item numbers. This property is available for child components used within a component that can have multiple children:

• Container
• Pager
• Sequence

To display the ordinal numbers, also set the numbered property on Container or Sequence to true. When numbered is false, AlexaOrdinal displays a circle without the number inside.

AlexaOrdinal example

This example shows a Sequence that displays AlexaOrdinal next to a line of text.

{
  "type": "Sequence",
  "id": "textList",
  "numbered": true,
  "height": "100vh",
  "width": "100vw",
  "data": [
    "This is the first item",
    "This is the second item",
    "This is the third item"
  ],
  "item": {
    "type": "Container",
    "direction": "row",
    "inheritParentState": true,
    "paddingLeft": "@spacingMedium",
    "paddingTop": "@spacingMedium",
    "items": [
      {
        "theme": "dark",
        "type": "AlexaOrdinal"
      },
      {
        "type": "Text",
        "text": "${data}",
        "textAlign": "center",
        "paddingLeft": "@spacingMedium"
      }
    ]
  }
}

Related topics

• Alexa Design System Overview
• Responsive Components and Templates