List

Unable to parse html

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

Unable to parse html

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

Unable to parse html

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

We use lists for enumerations. This means that each item should be no longer than one sentence, preferably just a few words. All items in a list should have the same form and structure.

Punctuation rules for lists

A common mistake when writing lists is incorrect use of colons, full stops, commas, and capital letters. There are two main rules for punctuation.

1. When each item is a continuation of the introductory sentence

• do not use a colon after the introduction
• use a lower-case initial letter in each item
• do not use a full stop or comma at the end of each item

2. When each item is a complete sentence, use a colon in the introductory sentence. In addition, remember the following:

• Use a capital letter for the first word, so that each item reads as a complete sentence.
• Use a full stop at the end of each item to indicate that the sentence is complete.

Examples

The application deadline is

• 15 November for the full year or the autumn semester
• 15 March for the spring semester

To be entitled to disability benefits, illness and/or injury must be the main reason for reduced work capacity and income.

In addition, you must generally meet the following conditions:

• You must be between 18 and 67 years old.
• You must have been a member of the National Insurance Scheme for the past five years before becoming ill or injured.
• You must have at least a 50 per cent reduction in work capacity and income.