Skip to main content

OrderedList

Displays a numbered list of related items in a specific sequence. Use to present step-by-step instructions, ranked items, or procedures where order matters.

Anchor to propertiesProperties

Anchor to id
id
string

A unique identifier for the element.

Was this section helpful?

Anchor to listitemListItem

Represents a single item within an unordered or ordered list. Use only as a child of s-unordered-list or s-ordered-list components.

Anchor to id
id
string

A unique identifier for the element.

Was this section helpful?

Code

<s-ordered-list>
<s-list-item>Add items to your cart</s-list-item>
<s-list-item>Review your order details</s-list-item>
<s-list-item>Complete your purchase</s-list-item>
</s-ordered-list>

Preview

Anchor to best-practicesBest Practices

  • Use s-ordered-list when you need to present items in a specific sequence or order. - Each item in the list should be wrapped in a s-list-item component. - Keep list items concise and consistent in length when possible. - Use s-ordered-list for step-by-step instructions, numbered procedures, or ranked items. - Consider using s-ordered-list when the order of items is important for understanding.
Was this section helpful?