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

Unordered Lists

Ordered Lists (nested)

  • Item
  • Item
    1. Item
      1. Item
      2. Item
    2. Item
      1. Item
      2. Item
  • 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.

  • 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
  • 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

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