To use the list component import the styles in your CSS or through HTML.

import '@cds/core/list/list.min.css';

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>