Skip to main content

List

Lists organise information into related groups of content.

View in Storybook

When to use​

Lists are a continuous group of text.

  • Lists should be sorted in logical ways that make content easy to scan
  • Lists present content in a way that makes it easy to identify

Structure​

Unordered​

list-unordered

Ordered​

list-ordered

Guidelines​

Bulleted lists are used when order is not of importance. Numbered lists are used when order and hierarchy are needed.

Implementation in Figma​

  1. In Figma go to the Assets Panel and search for lists.
  2. Drag and drop the component in your frame.
  3. Choose the variant from the Design Panel.

Do's and don'ts​

✅ Use list with one line text, ordered or unordered

❌ Do not use lists to organise large amount of information, use a Table instead

❌ Do not use lists as navigation