A list component embeds a formatted list (bulleted or numbered list) into page content.


Use lists to organize information in a digestible format. Lists can be very useful when you have a lot of text on a page.


There are many different types of lists, including unordered, ordered, and with icons.


By default, you should use bullets when displaying an unordered list. Use an unordered list when you want to break up related content, but list items are not sequential. You may also choose to present an unordered list without the bullets, or with horizontal rules between each list item.

Example of an unordered, bulleted listExample of an unordered horizontal list


Use ordered lists to convey a sequence of events or steps in a process. An example of an ordered list is a numbered list.

Example of an ordered, numbered list

With icons

Use icons to call out useful information about list elements. In the example below, each list item is a condition with a respective status icon. The object's overall status is an aggregation of the list items' statuses. Lists with icons can use small icons or big icons.

Example of a list with icons
View source on GitHub