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 3
- Item 1
Break with a Anchor (Text Link - Item 2
- Item 1
- Item 4
Ordered Lists (nested)
Nested <ol>
list by using .dnb-ol--nested
.
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- 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
.
Error: Unexpected token when processing JSX children.
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
- Item
- Item
- Item
- Item
- Item
- 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
- ol Item
- dl Title
- dl Description