Skip to content

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)

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

Term
Description
A term with several words
Description with several words lorem nulla mi posuere cubilia vel vulputate

Remove list styles

  • ul Item
  1. ol Item
dl Title
dl Description