Description List

DescriptionList shows the fields of a record as label and value pairs.

import { DescriptionItem, DescriptionList } from '@beyul/sulmu-ui'

Source · Figma

Examples

Stacked

The default: the label above the value, with a divider. columns goes from 1 to 3.

Product

Vehicle Rental

Price

$1,000

Quantity

1

Discount

N/A

import { DescriptionItem, DescriptionList } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <div style={{ maxWidth: 520 }}>
      <DescriptionList columns={2}>
        <DescriptionItem label="Product">Vehicle Rental</DescriptionItem>
        <DescriptionItem label="Price">$1,000</DescriptionItem>
        <DescriptionItem label="Quantity">1</DescriptionItem>
        <DescriptionItem label="Discount">N/A</DescriptionItem>
      </DescriptionList>
    </div>
  )
}

Inline

The label on the left and the value on the right, as used inside a Record Card.

Owner

Melanie Wilson

Contact

Martin Schleifer

Amount

$5,000 USD

Created Date

Jul 3, 2025

import { DescriptionItem, DescriptionList } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <div style={{ maxWidth: 280 }}>
      <DescriptionList layout="inline">
        <DescriptionItem label="Owner">Melanie Wilson</DescriptionItem>
        <DescriptionItem label="Contact">Martin Schleifer</DescriptionItem>
        <DescriptionItem label="Amount">$5,000 USD</DescriptionItem>
        <DescriptionItem label="Created Date">Jul 3, 2025</DescriptionItem>
      </DescriptionList>
    </div>
  )
}

Props

DescriptionList

Prop	Type	Default	Description
layout	"inline" | "stacked"	stacked	stacked: label above value with a divider (default). inline: label left, value right.
columns	1 | 2 | 3	1	Number of columns. Default: 1.

DescriptionItem

Prop	Type	Default	Description
label*	ReactNode	-
children	ReactNode	-	The value.

Usage notes

• It renders a real description list (dl, dt, dd), which screen readers announce as label and value pairs.
• Set layout on the list; the items follow it.