List

Introduction

Lists are used to present a collection of related items in a clear and organized way. Use them to break up content into scannable chunks, whether the items have a natural order or not.

Types

• Unordered list: Use for a set of items where order does not matter, such as feature descriptions or options.
• Ordered list: Use for items that follow a sequence, such as steps in a process or ranked items.
• Table of contents: A special ordered list style for page navigation, showing section links with support for nesting.

Unordered list

Unordered lists are ideal for items that do not require a specific sequence, such as features, options, or categories.

Ordered list

Ordered lists work well for step-by-step instructions or prioritized content.

Nested lists

Lists can be nested inside each other to represent hierarchy or subcategories.

Table of contents

A table of contents list uses a special styling suited for page navigation. It supports multiple levels of nesting, making it easy to reflect the heading hierarchy of a page. See Table of contents code example for implementation details.

Best practices

• Use the right type: Use unordered lists for items without a natural order, and ordered lists when sequence matters.
• Keep items concise: Each list item should be short and scannable. If an item needs more than one sentence, consider using an Accordion instead.
• Consistent structure: Keep list items parallel in grammar and structure to improve readability.
• Avoid deep nesting: Limit nesting to one or two levels. Deeply nested lists are hard to scan and understand.

Examples

Lists in components

Lists can be used within various components to structure and present content.