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" />

List

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>
      

List

• 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>
      

List

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>
      

List

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>
      

Space list

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>
      

Theme

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>
      

List

Name

Description

Name

Description

       <dl cds-list>
    <dt>Name</dt>
    <dd>Description</dd>
    <dt>Name</dt>
    <dd>Description</dd>
</dl>
      

Space description list

Name

Description

Name

Description

       <dl cds-list cds-layout="vertical gap:md">
    <div>
        <dt>Name</dt>
        <dd>Description</dd>
    </div>
    <div>
        <dt>Name</dt>
        <dd>Description</dd>
    </div>
</dl>