List usage guidelines

The list component is used to organize and display related content in a list format. List items can include text, links, or a combination of both.

When to use

• To break up large blocks of text into digestible pieces.
• To display a sequence of steps or a set of related items.
• To create a list of resources.

When not to use

• If the data has multiple columns or requires sorting and filtering, use a table instead.
• If the list items are primary navigation actions, use a navigation component like side nav or tabs.

Examples

Unordered list

Unordered lists are used when the order of the items is not relevant. List items in unordered lists are marked with a bullet.

Preview

• List item
• List item
  • Second level list item
    • Third level list item
    • Third level list item
  • Second level list item
• List item
  • Second level list item

Code

import { ListItem, UnorderedList } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <UnorderedList>
      <ListItem>List item</ListItem>
      <ListItem>
        List item
        <UnorderedList>
          <ListItem>
            Second level list item
            <UnorderedList>
              <ListItem>Third level list item</ListItem>
              <ListItem>Third level list item</ListItem>
            </UnorderedList>
          </ListItem>
          <ListItem>Second level list item</ListItem>
        </UnorderedList>
      </ListItem>
      <ListItem>
        List item
        <UnorderedList>
          <ListItem>Second level list item</ListItem>
        </UnorderedList>
      </ListItem>
    </UnorderedList>
  );
}

Copy code Open in playground

Ordered list

Ordered lists are used for sequential information, and are automatically numbered.

Preview

1. List item
2. List item
   1. Second level list item
      1. Third level list item
      2. Third level list item
   2. Second level list item
3. List item
   1. Second level list item

Code

import { ListItem, OrderedList } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <OrderedList>
      <ListItem>List item</ListItem>
      <ListItem>
        List item
        <OrderedList>
          <ListItem>
            Second level list item
            <OrderedList>
              <ListItem>Third level list item</ListItem>
              <ListItem>Third level list item</ListItem>
            </OrderedList>
          </ListItem>
          <ListItem>Second level list item</ListItem>
        </OrderedList>
      </ListItem>
      <ListItem>
        List item
        <OrderedList>
          <ListItem>Second level list item</ListItem>
        </OrderedList>
      </ListItem>
    </OrderedList>
  );
}

Copy code Open in playground

Formatting and layout

List items and their markers (bullets/numbers) are always start-aligned.

Content writing

• Start every item with the same part of speech (e.g., all verbs or all nouns).
• Use sentence case for all list items.
• If items are full sentences, end them with a period. If they are short phrases, no end punctuation is needed.
• Keep list items brief. If an item is longer than two lines, consider if it should be a paragraph instead.
• Avoid nesting lists more than two levels deep to prevent the UI from becoming too complex and hard to read.