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'

render(
  <Ol nested inside>
    <li>Item</li>
  </Ol>,
)

Unordered Lists

Item 1
Item 2
Item 3Item 1 
Break with a Anchor (Text Link
Item 2
Item 4
Code Editor<Ul>
  <Li>Item 1</Li>
  <Li>Item 2</Li>
  <Li>
    Item 3
    <Ul>
      <Li>
        Item 1 <br />
        Break with a <Anchor href="/">Anchor (Text Link</Anchor>
      </Li>
      <Li>Item 2</Li>
    </Ul>
  </Li>
  <Li>Item 4</Li>
</Ul>

Ordered Lists (nested)

Nested <ol> list by using .dnb-ol--nested.

Item
ItemItemItem
Item
ItemItem
Item
Item
Code Editor<Ol nested>
  <Li>Item</Li>
  <Li>
    Item
    <Ol>
      <Li>
        Item
        <Ol>
          <Li>Item</Li>
          <Li>Item</Li>
        </Ol>
      </Li>
      <Li>
        Item
        <Ol>
          <Li>Item</Li>
          <Li>Item</Li>
        </Ol>
      </Li>
    </Ol>
  </Li>
  <Li>Item</Li>
</Ol>

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.

Using dnb-ol--outside (default): Using Porta commodo tempus interdum habitant urna magna aliquet quam nislPorta commodo tempus interdum habitant urna magna aliquet quam nisl
New ol, using dnb-ol--inside: Porta commodo tempus interdum habitant urna magna aliquet quam nislPorta commodo tempus interdum habitant urna magna aliquet quam nisl
Code Editorconst WidthLimit = styled.div`
  max-width: 22rem;
  .dnb-ol li::before {
    font-weight: var(--font-weight-bold);
  }
`
render(
  <WidthLimit>
    <Ol nested className="dnb-ol--outside">
      <Li>
        Using <code className="dnb-code">dnb-ol--outside</code> (default):
        Using Porta commodo tempus interdum habitant urna magna aliquet
        quam nisl
        <Ol>
          <Li>
            Porta commodo tempus interdum habitant urna magna aliquet quam
            nisl
          </Li>
        </Ol>
      </Li>
    </Ol>
    <Ol nested className="dnb-ol--inside">
      <Li>
        New ol, using <code className="dnb-code">dnb-ol--inside</code>:
        Porta commodo tempus interdum habitant urna magna aliquet quam nisl
        <Ol>
          <Li>
            Porta commodo tempus interdum habitant urna magna aliquet quam
            nisl
          </Li>
        </Ol>
      </Li>
    </Ol>
  </WidthLimit>,
)

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.

Item
ItemItemItem
Item
Item
Code Editor<Ol type="A">
  <Li>Item</Li>
  <Li>
    Item
    <Ol type="I" start={3}>
      <Li>
        Item
        <Ol type="i">
          <Li>Item</Li>
          <Li>Item</Li>
        </Ol>
      </Li>
    </Ol>
  </Li>
  <Li>Item</Li>
</Ol>

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.

TermDescriptionTermDescription 1Description 2Description 3Sub TermSub Description
Code Editor<Dl>
  <Dt>Term</Dt>
  <Dd>Description</Dd>
  <Dt>Term</Dt>
  <Dd>Description 1</Dd>
  <Dd>Description 2</Dd>
  <Dd>Description 3</Dd>
  <Dd>
    <Dl>
      <Dt>Sub Term</Dt>
      <Dd>Sub Description</Dd>
    </Dl>
  </Dd>
</Dl>

Definition List in horizontal direction

TermDescriptionA term with several wordsDescription with several words lorem nulla mi posuere cubilia vel vulputate
Code Editor<Dl direction="horizontal">
  <Dl.Item>
    <Dt>Term</Dt>
    <Dd>Description</Dd>
  </Dl.Item>
  <Dl.Item>
    <Dt>A term with several words</Dt>
    <Dd>
      Description with several words lorem nulla mi posuere cubilia vel
      vulputate
    </Dd>
  </Dl.Item>
</Dl>

Remove list styles

ul Item
ol Item
dl Titledl Description
Code Editor<ul className="dnb-ul dnb-unstyled-list">
  <li>ul Item</li>
</ul>
<ol className="dnb-ol dnb-unstyled-list">
  <li>ol Item</li>
</ol>
<dl className="dnb-dl dnb-unstyled-list">
  <dt>dl Title</dt>
  <dd>dl Description</dd>
</dl>

#Lists

#List modifiers

#Unordered Lists

#Ordered Lists (nested)

#Ordered list style position (outside vs inside)

#Ordered list with other types

#Definition Lists

#Definition List in horizontal direction

#Remove list styles