Skip to content

Import

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

Description

Lists are used to specify lists of information.

List modifiers

  • .dnb-ul--nested / .dnb-ol--nested will ensure 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.

  1. Item
  2. Item
    1. Item
      1. Item
      2. Item
    2. Item
      1. Item
      2. Item
  3. Item

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.

  1. Using dnb-ol--outside (default): Using Porta commodo tempus interdum habitant urna magna aliquet quam nisl
    1. Porta commodo tempus interdum habitant urna magna aliquet quam nisl
  1. New ol, using dnb-ol--inside: Porta commodo tempus interdum habitant urna magna aliquet quam nisl
    1. Porta commodo tempus interdum habitant urna magna aliquet quam nisl

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.

  1. Item
  2. Item
    1. Item
      1. Item
      2. Item
  3. Item

Definition Lists

Use Definition Lists when ever 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.

Term
Description
Term
Description 1
Description 2
Description 3
Sub Term
Sub Description

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.

Term 1
Description 1
Term 2
Description 2
A term with several words lorem dolor sit amet consectetur adipiscing
Description with several words lorem nulla mi posuere cubilia vel vulputate

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.

Term 1
Description 1
Term 2
Description 2
A term with several words lorem dolor sit amet
Description with several words lorem nulla mi posuere cubilia vel vulputate

Remove list styles

  • ul Item
  1. ol Item
dl Title
dl Description