To use the list component import the component in your JavaScript.

import '@cds/core/list/register.js';

Or, import it into html.

<link href="/node_modules/@cds/core/list/list.min.css" rel="stylesheet" />

OrderedList

1. The five boxing wizards jump quickly
2. The five boxing wizards jump quickly
3. The five boxing wizards jump quickly
4. The five boxing wizards jump quickly

       <ol cds-list>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
</ol>
      

UnorderedList

• The five boxing wizards jump quickly
• The five boxing wizards jump quickly
• The five boxing wizards jump quickly
• The five boxing wizards jump quickly

       <ul cds-list>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
</ul>
      

UnstyledList

1. The five boxing wizards jump quickly
2. The five boxing wizards jump quickly
3. The five boxing wizards jump quickly
4. The five boxing wizards jump quickly

• The five boxing wizards jump quickly
• The five boxing wizards jump quickly
• The five boxing wizards jump quickly
• The five boxing wizards jump quickly

       <ol cds-list="unstyled">
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
</ol>

<br />

<ul cds-list="unstyled">
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
</ul>
      

NestedList

1. The quick brown fox jumps over the lazy dog
2. The quick brown fox jumps over the lazy dog
3. The quick brown fox jumps over the lazy dog
4. The quick brown fox jumps over the lazy dog
5. The quick brown fox jumps over the lazy dog
   • The five boxing wizards jump quickly
   • The five boxing wizards jump quickly
   • The five boxing wizards jump quickly
   • The five boxing wizards jump quickly
   • The five boxing wizards jump quickly
   • The five boxing wizards jump quickly
   • The five boxing wizards jump quickly
6. The quick brown fox jumps over the lazy dog
7. The quick brown fox jumps over the lazy dog

       <ol cds-list>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>
        The quick brown fox jumps over the lazy dog
        <ul cds-list>
            <li>The five boxing wizards jump quickly</li>
            <li>The five boxing wizards jump quickly</li>
            <li>The five boxing wizards jump quickly</li>
            <li>The five boxing wizards jump quickly</li>
            <li>The five boxing wizards jump quickly</li>
            <li>The five boxing wizards jump quickly</li>
            <li>The five boxing wizards jump quickly</li>
        </ul>
    </li>
    <li>The quick brown fox jumps over the lazy dog</li>
    <li>The quick brown fox jumps over the lazy dog</li>
</ol>
      

CustomSpaceList

1. The five boxing wizards jump quickly
2. The five boxing wizards jump quickly
3. The five boxing wizards jump quickly
4. The five boxing wizards jump quickly

       <ol cds-list cds-layout="vertical gap:md">
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
    <li>The five boxing wizards jump quickly</li>
</ol>
      

DarkTheme

1. The five boxing wizards jump quickly
2. The five boxing wizards jump quickly
3. The five boxing wizards jump quickly
4. The five boxing wizards jump quickly

• The five boxing wizards jump quickly
• The five boxing wizards jump quickly
• The five boxing wizards jump quickly
• The five boxing wizards jump quickly

       <div cds-layout="vertical gap:md" cds-theme="dark">
    <ol cds-list>
        <li>The five boxing wizards jump quickly</li>
        <li>The five boxing wizards jump quickly</li>
        <li>The five boxing wizards jump quickly</li>
        <li>The five boxing wizards jump quickly</li>
    </ol>

    <ul cds-list>
        <li>The five boxing wizards jump quickly</li>
        <li>The five boxing wizards jump quickly</li>
        <li>The five boxing wizards jump quickly</li>
        <li>The five boxing wizards jump quickly</li>
    </ul>
</div>