List

const Preview = () => {
  return (
    <List.Unordered>
      <List.Item>Bøyabreen</List.Item>
      <List.Item>Briksdalsbreen</List.Item>
      <List.Item>Nigardsbreen</List.Item>
    </List.Unordered>
  );
};

render(<Preview />)

Use List when

• users need a quick overview of content in longer texts
• several steps in a process should be listed
• criteria need to be presented clearly

Avoid List when

• users are expected to read longer blocks of text
• several groups of information need to be compared, use a Table instead

Example

Unordered list

const UnorderedEn = () => {
  return (
    <>
      <Heading
        level={2}
        data-size='xs'
        style={{ marginBottom: 'var(--ds-size-2)' }}
      >
        The association is required to have an auditor if it has
      </Heading>

      <List.Unordered>
        <List.Item>
          an average number of employees equivalent to ten full-time positions
          or more
        </List.Item>
        <List.Item>
          a balance sheet total of 27 million kroner or more
        </List.Item>
        <List.Item>operating income of 35 million kroner or more</List.Item>
      </List.Unordered>
    </>
  );
};

render(<UnorderedEn />)

Ordered list

const OrderedEn = () => {
  return (
    <>
      <Heading
        level={2}
        data-size='xs'
        style={{ marginBottom: 'var(--ds-size-2)' }}
      >
        How to do it:
      </Heading>

      <List.Ordered>
        <List.Item>
          Pat the chicken breasts dry before seasoning and frying
        </List.Item>
        <List.Item>Add salt and pepper to the breasts</List.Item>
        <List.Item>
          Fry the breasts on high heat for two minutes on each side
        </List.Item>
      </List.Ordered>
    </>
  );
};

render(<OrderedEn />)

Guidelines

Lists make content easier to scan and understand. Use ordered lists when the sequence matters, and unordered lists when it does not. Be mindful of structure and avoid long lists. Consider splitting content into several shorter lists to improve readability.

List or table?

Lists and tables serve different purposes. Using the correct component makes the experience clearer for all users, especially for those with cognitive or learning difficulties, or those using screen readers.

• A list presents related information in a clear, scannable way.
• A table allows users to view and compare multiple groups of information.

Text

All items in a list should have the same form and structure.

When each item is a continuation of the introduction, we use

• a lowercase initial letter in each item
• no full stop or comma at the end of each item

When the items are full sentences, we use

• A capital initial letter in the first word, so that each item reads as an independent sentence.
• A full stop at the end of each item, to indicate that the sentence is complete.

Use of colon

A colon should not be used before a list when the items are a natural continuation of the introduction. Use a colon only when it would also be correct in a normal enumeration without a list.¹ See the example below.

When you fill in your tax return, remember this:

• You must enter net income from renting out a dwelling.
• You must enter net income from renting out land.

Relevant sources

[1] The Language Council of Norway’s recommendation on colons and lists