Lists

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/elements'
render(
<Ol nested inside>
<li>Item</li>
</Ol>
)

Unordered Lists

Ordered Lists (nested)

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

Nested ol list by using

.dnb-ol--nested

Ordered list style position (outside vs inside)

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

  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

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.

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

ol with custom type

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

Remove list styles

  • ul Item
  1. ol Item
dl Title
dl Description