Lists#

Import#

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

Description#

Lists are used to specify lists of information.

Relevant links#

• Figma
• Source code
• Docs code

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:

import { Ol } from '@dnb/eufemia'

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

Demos#

Unordered Lists#

Ordered Lists (nested)#

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

Unordered Lists inside Ordered Lists#

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.

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.

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.

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.

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.

Remove list styles#