List

How to use lists

Lists can be used to break up related content to make the information easier for users to read.

When using lists:

• Use the <ul> element for lists with bullet points if the items in the list are of equal status or value
• Use the <ol> element to create a numbered list numbers if the items in the list are a sequence, like when giving instructions
• Use the <il> element to create a list without any bullet points or numbers
• They should only be used for related information or content
• Order your items in a clear way, whether it’s alphabetical, numerical, time-based or some other logical order

Types of list

Bare list

A bare list displays a list of items without the default browser styling. The items can be vertically spaced by using the spaced flag.

<List
  items={["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]}
  type="bare"
  spaced
/>

Inline list

An inline list removes all styling and throws the items horizontally. The spaced prop adds horizontal spacing.

<List
  items={["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]}
  type="inline"
  spaced
/>

Matrix list

The matrix list type is similar to an inline list but also spaces the items on the vertical axis so they tile gracefully.

<List
  items={Array(20)
    .fill(0)
    .map((_, index) => `Item ${index + 1}`)}
  type="matrix"
  spaced
/>

Justified list

The justified list type divides the available space equally between items

<List items={["Item 1", "Item 2", "Item 3"]} type="justified" />

Custom list items

If you're listing out items more complex than basic strings you can use the ListItem component to wrap your custom content.

<List type="matrix" spaced>
  {Array(9)
    .fill(0)
    .map((_, index) => (
      <ListItem key={index}>
        <span className="ln-u-display-inline-block ln-u-soft ln-u-bg-color-light">
          {index + 1}
        </span>
      </ListItem>
    ))}
</List>

Copy guidelines

When using lists:

• Start your item labels with a capital letter
• Don’t use commas or any punctuation at the end of each item
• Don’t use more than three words per item

Was this page helpful?