Ordered list
Use the ordered list component to display a list of numbered items.
On this page
On this page
Anatomy
Usage
Use an ordered list to represent a list of items in a numerical order.
A number indicating the items relative position in the sequence will be prepended to each item in the list.
The ordered list is commonly used when presenting sequential or step-by-step information. It is suitable for instructions, procedures, tutorials, or any content that follows a specific order. Ensure that the items in the ordered list are logically organized and follow a clear progression. This helps readers understand the sequence of information and makes it easier to follow.
Avoid overusing ordered lists. Reserve them for situations where the order of items is genuinely meaningful or where a clear sequence needs to be conveyed. For lists that don't require a specific order, consider using an unordered list instead.
Use an ordered list to present a sequence of steps.
Don't use an ordered list to present a list of items that don't require a specific order. Use an unordered list instead.
The ordered list should have concise and short items. Avoid using long sentences or paragraphs as they can be difficult to scan and comprehend. If you need to include a long item or even headings and links, consider using a pillar, a card or a river instead.
Use an ordered list for short and concise content items.
Don't use an ordered list for long and rich sentences, paragraphs, headings or links. Use a pillar, card or river components instead.
Related components
- Unordered list: to display a list of plain content items.
- Pillar: To display related content with less visual emphasis.
- Card: to display navigational related content with higher visual weight.
- River: To display a list of content items with a visual asset.