Skip to main contentCarbon Design System

List

Lists are vertical groupings of related content. List items begin with either a number or a bullet.

Live demo



      This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.

      Accessibility testing status

      For every latest release, Carbon runs tests on all components to meet the accessibility requirements. These different statuses report the work that Carbon has done in the back end. These tests appear only when the components are stable.


        Overview

        Lists consist of related content grouped together and organized vertically. Use bulleted lists when you don’t need to convey a specific order for list items. Use numbered lists when you need to convey a priority, hierarchy, or sequence between list items.

        Variants

        VariantPurpose
        Unordered listsTo present content of equal status or value.
        Ordered listsImply sequence and order, and are commonly used when giving a set of instructions.

        Content

        Length

        Generally, lists should be used to present simple pieces of information. For more complex sets of data, consider using a data table.

        Order

        Arrange list items in a logical way. For example, if the list is about resource use, the default order might be highest resource use to lowest. Grouping items in categories into smaller, more specific lists might be more meaningful in some contexts. Alternatively, organize in alphabetical or numeric order.

        Text

        Use list items that are grammatically parallel. For example, do not mix passive voice with active voice or declarative sentences (statements) with imperative sentences (direct command).

        Example of a list

        Feedback

        Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.