#Lists

#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.

#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