@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
395 lines (342 loc) • 8.41 kB
Markdown
---
title: 'Lists'
description: 'Lists are used to specify lists of information.'
version: 10.104.0
generatedAt: 2026-04-17T18:46:12.163Z
checksum: 597b732809a09b344dd0a6a017235ff45068cc56d53a2cca843c880151107c4d
---
# 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": "string",
"status": "optional"
},
"innerRef": {
"doc": "Send along a custom React Ref.",
"type": "React.RefObject",
"status": "optional"
},
"children": {
"doc": "Contents.",
"type": "React.Node",
"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"
},
"innerRef": {
"doc": "Send along a custom React Ref.",
"type": "React.RefObject",
"status": "optional"
},
"children": {
"doc": "Contents.",
"type": "React.Node",
"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"
},
"innerRef": {
"doc": "Send along a custom React Ref.",
"type": "React.RefObject",
"status": "optional"
},
"children": {
"doc": "Contents.",
"type": "React.Node",
"status": "optional"
},
"[Space](/uilib/layout/space/properties)": {
"doc": "Spacing properties like `top` or `bottom` are supported.",
"type": ["string", "object"],
"status": "optional"
}
}
}
```