List

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

Unordered List

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

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

Ordered List

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

Composition of Lists

Item 1 SubItem 1.1
SubItem 1.2
SubItem 1.3
Item 2
Item 3
<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>

Ul props

Name

Type

Default

fontSize

stringnumberarray

"inherit"

children

arraynode

Ol props

Name

Type

Default

children

arraynode

Li props

Name

Type

Default

children

arraystringnode

Sections