List

Description

The List component is used to group related content in either ordered or unordered formats. Lists help structure content clearly, improve readability, and support information hierarchy.

• Use an unordered list (ul) when the order of items is not important.
• Use an ordered list (ol) when the sequence of items matters, such as for instructions or steps.
• List items are represented with the li (list item) element.

Lists can be nested if needed, though excessive nesting should be avoided for readability and accessibility.

From a typographical point of view, the same things apply to li list items as to paragraphs.
And of course the general typographical rules also apply.

Usage

Basic structure

<ul>
    <li>List item one</li>
    <li>List item two</li>
    <li>List item three</li>
</ul>
<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol> 

Nested list example

<ul>
  <li>Main item
    <ul>
      <li>Nested item 1</li>
      <li>Nested item 2</li>
    </ul>
  </li>
</ul>

Accessibility considerations

• Use semantic elements (ul, ol, li) to ensure screen readers can interpret list structures correctly.
• Avoid using lists for layout purposes.
• Provide meaningful context or headings around lists when used for navigation or grouped actions.
• If lists are interactive (e.g., used for menus or checklists), additional roles and keyboard handling may be required.

Styling notes

• Content lists (e.g. for text, steps, or grouped information) must retain clear list semantics and a consistent visual style across the application. Bullet or number styling should be visible and uniform, using list-style-type where appropriate
• Functional or navigational lists (e.g. sidebars, menus, checklists) may be visually styled to remove default bullets or numbers and replaced with custom indicators or icons. In these cases, semantic markup must still be preserved, or replaced with appropriate roles and ARIA attributes if necessary.
• When repurposing lists for layout or interaction, ensure that the structure remains accessible. Avoid using ul or ol solely for spacing or alignment without semantic meaning.

See it in action

Ordered list

1. Lorem ipsum

2. dolor sit

   1. amet consectetur
   2. Imperdiet vitae
   3. purus ut viverra
3. massa facilisi
4. massa eget
5. Orci vitae

Unordered list

• turpis praesent

• pretium congue ut

  • eu ullamcorper mi
  • Amet sagittis
  • euismod est sit
• pharetra urna venenatis
• Est eget gravida
• sit rhoncus purus

CSS

ul, ol {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
ul ul, ol ol, ul ol, ol ul {
    margin-top: 0;
    margin-bottom: 0;
}
li {
    margin-bottom: 1rem;
}