---
title: 'Lists'
description: 'Lists are used to specify lists of information.'
version: 11.2.2
generatedAt: 2026-05-11T08:17:55.390Z
checksum: 0b40c0df9c0324d04a4dc5af29934df83fda4e1758d20cd1df07895093890829
---

# Lists

## Import

```tsx
import { Dd, Dl, Dt, Ol, Ul } from '@dnb/eufemia/elements'
```

## Description

Lists are used to specify lists of information.

## Relevant links

- [Figma](https://www.figma.com/design/cdtwQD8IJ7pTeE45U148r1/%F0%9F%92%BB-Eufemia---Web?node-id=4314-724)
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/elements/lists)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/elements/lists)

## List modifiers

- `.dnb-ul--nested` / `.dnb-ol--nested` ensures a nested structure of several lists
- `.dnb-ol--outside` (default) defines the position of the marker
- `.dnb-ol--inside` defines the position of the marker

With React, you can also send in the modifiers as booleans:

```jsx
import { Ol } from '@dnb/eufemia'

render(
  <Ol nested inside>
    <li>Item</li>
  </Ol>
)
```


## Demos

### Unordered Lists


```tsx
render(<Ul>
      <Li>Item 1</Li>
      <Li>Item 2</Li>
      <Li>
        Item 3
        <Ul>
          <Li>
            Item 1 <br />
            Break with a <Anchor href="/">Anchor (Text Link)</Anchor>
          </Li>
          <Li>Item 2</Li>
        </Ul>
      </Li>
      <Li>Item 4</Li>
    </Ul>)
```


### Ordered Lists (nested)

Nested `<ol>` list by using `.dnb-ol--nested`.


```tsx
render(<Ol nested>
      <Li>Item</Li>
      <Li>
        Item
        <Ol>
          <Li>
            Item
            <Ol>
              <Li>Item</Li>
              <Li>Item</Li>
            </Ol>
          </Li>
          <Li>
            Item
            <Ol>
              <Li>Item</Li>
              <Li>Item</Li>
            </Ol>
          </Li>
        </Ol>
      </Li>
      <Li>Item</Li>
    </Ol>)
```


### Unordered Lists inside Ordered Lists


```tsx
render(<Ol>
      <Li>
        Ordered item 1
        <Ul>
          <Li>Unordered item 1</Li>
          <Li>Unordered item 2</Li>
          <Li>Unordered item 3</Li>
        </Ul>
      </Li>
      <Li>Ordered item 2</Li>
    </Ol>)
```


#### Ordered list style position (outside vs inside)

The list marker will be inside of wrapped text / text with newlines.

Nested `<ol>` with inside modifier `.dnb-ol--inside`.


```tsx
const WidthLimit = styled.div`
        max-width: 22rem;
        .dnb-ol li::before {
          font-weight: var(--font-weight-bold);
        }
      `;
render(<WidthLimit>
          <Ol nested className="dnb-ol--outside">
            <Li>
              Using <code className="dnb-code">dnb-ol--outside</code>{' '}
              (default): Using Porta commodo tempus interdum habitant urna
              magna aliquet quam nisl
              <Ol>
                <Li>
                  Porta commodo tempus interdum habitant urna magna aliquet
                  quam nisl
                </Li>
              </Ol>
            </Li>
          </Ol>
          <Ol nested className="dnb-ol--inside">
            <Li>
              New ol, using{' '}
              <code className="dnb-code">dnb-ol--inside</code>: Porta
              commodo tempus interdum habitant urna magna aliquet quam nisl
              <Ol>
                <Li>
                  Porta commodo tempus interdum habitant urna magna aliquet
                  quam nisl
                </Li>
              </Ol>
            </Li>
          </Ol>
        </WidthLimit>);
```


#### Ordered list with other types

Ordered lists do support natively other types, like _letters_ and _roman numerals_. You can define that by using the `type` HTML attribute.

`<ol>` with custom type.


```tsx
render(<Ol type="A">
      <Li>Item</Li>
      <Li>
        Item
        <Ol type="I" start={3}>
          <Li>
            Item
            <Ol type="i">
              <Li>Item</Li>
              <Li>Item</Li>
            </Ol>
          </Li>
        </Ol>
      </Li>
      <Li>Item</Li>
    </Ol>)
```


### Definition Lists

Use Definition Lists whenever you have to tie together any items that have a direct relationship with each other (name/value sets).

You can use multiples of `<dt>` and `<dd>` within a definition list.

You can also use block level elements in the definition description, such as the `<p>` and `<ul>` elements. But you cannot use block level elements inside a definition term.

Any styling can be applied.


```tsx
render(<Dl>
      <Dt>Term</Dt>
      <Dd>Description</Dd>
      <Dt>Term</Dt>
      <Dd>Description 1</Dd>
      <Dd>Description 2</Dd>
      <Dd>Description 3</Dd>
      <Dd>
        <Dl>
          <Dt>Sub Term</Dt>
          <Dd>Sub Description</Dd>
        </Dl>
      </Dd>
    </Dl>)
```


### Definition List in horizontal direction

When using the `layout="horizontal"` property, the term and description will be wrapped in a `Dl.Item` element. You can only use one `Dd` element per `Dt` element.

The term and description are aligned on the bottom.


```tsx
render(<Dl layout="horizontal">
      <Dl.Item>
        <Dt>Term 1</Dt>
        <Dd>Description 1</Dd>
      </Dl.Item>
      <Dl.Item>
        <Dt>Term 2</Dt>
        <Dd>Description 2</Dd>
      </Dl.Item>
      <Dl.Item>
        <Dt>
          A term with several words lorem dolor sit amet consectetur
          adipiscing
        </Dt>
        <Dd>
          Description with several words lorem nulla mi posuere cubilia vel
          vulputate
        </Dd>
      </Dl.Item>
    </Dl>)
```


#### Definition List with a Grid pattern

You can only use one `Dd` element per `Dt` element.

The term and description are aligned on the bottom.


```tsx
render(<Dl layout="grid">
      <Dt>Term 1</Dt>
      <Dd>Description 1</Dd>

      <Dt>Term 2</Dt>
      <Dd>Description 2</Dd>

      <Dt>A term with several words lorem dolor sit amet</Dt>
      <Dd>
        Description with several words lorem nulla mi posuere cubilia vel
        vulputate
      </Dd>
    </Dl>)
```


### Remove list styles


```tsx
<ul className="dnb-ul dnb-unstyled-list">
    <li>ul Item</li>
  </ul>
<ol className="dnb-ol dnb-unstyled-list">
    <li>ol Item</li>
  </ol>
<dl className="dnb-dl dnb-unstyled-list">
    <dt>dl Title</dt>
    <dd>dl Description</dd>
  </dl>
```

## `Dl` Properties


```json
{
  "props": {
    "layout": {
      "doc": "Sets the layout of the list. Can be `vertical`, `horizontal` or `grid`. Defaults to `vertical`.",
      "type": [
        "\"vertical\"",
        "\"horizontal\"",
        "\"grid\""
      ],
      "status": "optional"
    },
    "ref": {
      "doc": "Send along a custom `React.Ref`.",
      "type": "React.RefObject",
      "status": "optional"
    },
    "children": {
      "doc": "Contents.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  }
}
```


## `Ol` Properties


```json
{
  "props": {
    "inside": {
      "doc": "Defines the position of the marker.",
      "type": "boolean",
      "status": "optional"
    },
    "outside": {
      "doc": "Defines the position of the marker (default).",
      "type": "boolean",
      "status": "optional"
    },
    "nested": {
      "doc": "Will ensure a nested structure of several lists.",
      "type": "boolean",
      "status": "optional"
    },
    "ref": {
      "doc": "Send along a custom `React.Ref`.",
      "type": "React.RefObject",
      "status": "optional"
    },
    "children": {
      "doc": "Contents.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  }
}
```


## `Ul` Properties


```json
{
  "props": {
    "inside": {
      "doc": "Defines the position of the marker.",
      "type": "boolean",
      "status": "optional"
    },
    "outside": {
      "doc": "Defines the position of the marker (default).",
      "type": "boolean",
      "status": "optional"
    },
    "nested": {
      "doc": "Will ensure a nested structure of several lists.",
      "type": "boolean",
      "status": "optional"
    },
    "ref": {
      "doc": "Send along a custom `React.Ref`.",
      "type": "React.RefObject",
      "status": "optional"
    },
    "children": {
      "doc": "Contents.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": [
        "string",
        "object"
      ],
      "status": "optional"
    }
  }
}
```