title: "List" slug: "/packages/list" category: "general" componentNames:

• "Ul"
• "Ol"
• "Li"

List

import { Ul, Ol, Li } from "@ds-kit/list"

Unordered List

A basic example of an unordered List component can look like this:

<Ul>
  <Li>Item 1</Li>
  <Li>Item 2</Li>
  <Li>Item 3</Li>
</Ul>

Ordered List

<Ol ml="5">
  <Li>Item 1</Li>
  <Li color="blue">Item 2</Li>
  <Li>Item 3</Li>
</Ol>

Composition of Lists

<Ul>
  <Li>
    Item 1
    <Ol>
      <Li>SubItem 1.1</Li>
      <Li>SubItem 1.2</Li>
      <Li>SubItem 1.3</Li>
    </Ol>
  </Li>
  <Li>Item 2</Li>
  <Li>Item 3</Li>
</Ul>