Description List

A description list is used to present pairs of terms and their corresponding descriptions. It is ideal for displaying structured information, such as metadata or key-value pairs, in a concise and readable format.

Default

The standard version used to present pairs of terms and their corresponding descriptions

Heading: Content
Heading: Content
Heading: Content
Heading: Content
Heading: Content lorem ipsum dolor sit amet consectetur. Tempus sagittis cursus sit vel cursus commodo. Aliquam tortor lacus ante velit nisi ullamcorper sed est. Arcu vel ut quam tellus mus blandit. Nullam senectus sit aliquam non consectetur ullamcorper orci.

import * as UI from "@iyk/ui"

export default () => (
  <UI.DescriptionList.List>
    <UI.DescriptionList.Item term="Heading">Content</UI.DescriptionList.Item>
    <UI.DescriptionList.Item term="Heading">Content</UI.DescriptionList.Item>
    <UI.DescriptionList.Item term="Heading">Content</UI.DescriptionList.Item>
    <UI.DescriptionList.Item term="Heading">Content</UI.DescriptionList.Item>
    <UI.DescriptionList.Item term="Heading">
      Content lorem ipsum dolor sit amet consectetur. Tempus sagittis cursus sit vel cursus commodo.
      Aliquam tortor lacus ante velit nisi ullamcorper sed est. Arcu vel ut quam tellus mus blandit.
      Nullam senectus sit aliquam non consectetur ullamcorper orci.
    </UI.DescriptionList.Item>
  </UI.DescriptionList.List>
)

Nested

A variation of the description list that supports nested key-value pairs, making it ideal for displaying hierarchical or grouped information.

Heading

Content

Heading

Content lorem ipsum dolor sit amet consectetur. Tempus sagittis cursus sit vel cursus commodo. Aliquam tortor lacus ante velit nisi ullamcorper sed est. Arcu vel ut quam tellus mus blandit. Nullam senectus sit aliquam non consectetur ullamcorper orci.

Heading

Heading: Content
Heading: Content
Heading: Content
Heading: Content

import * as UI from "@iyk/ui"

export default () => (
  <UI.DescriptionList.List>
    <UI.DescriptionList.Item term="Heading">Content</UI.DescriptionList.Item>
    <UI.DescriptionList.Item term="Heading">
      Content lorem ipsum dolor sit amet consectetur. Tempus sagittis cursus sit vel cursus commodo.
      Aliquam tortor lacus ante velit nisi ullamcorper sed est. Arcu vel ut quam tellus mus blandit.
      Nullam senectus sit aliquam non consectetur ullamcorper orci.
    </UI.DescriptionList.Item>
    <UI.DescriptionList.Item term="Heading">
      <UI.DescriptionList.List isNested>
        <UI.DescriptionList.Item isNested term="Heading">
          Content
        </UI.DescriptionList.Item>
        <UI.DescriptionList.Item isNested term="Heading">
          Content
        </UI.DescriptionList.Item>
        <UI.DescriptionList.Item isNested term="Heading">
          Content
        </UI.DescriptionList.Item>
        <UI.DescriptionList.Item isNested term="Heading">
          Content
        </UI.DescriptionList.Item>
      </UI.DescriptionList.List>
    </UI.DescriptionList.Item>
  </UI.DescriptionList.List>
)