Skip to content
Components

DescriptionList

A <dl> that lays out term/description pairs in a grid. Import from "@instruments/materia-ui/components/description-list".

Material
Natural marble
Finish
Polished
Origin
Carrara, Italy
Lead time
3–5 business days

Usage

import { DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm } from "@instruments/materia-ui/components/description-list";

Best practices

  • Fill it with DescriptionItem rows (each a DescriptionTerm + DescriptionDetails) - it renders a real <dl>, so keep the dt/dd semantics rather than nesting raw divs.

  • Use this for read-only key/value metadata about one entity; for tabular rows of many records reach for Table or DataGrid instead.

  • Turn on showSeparators when items are visually dense; leave it off inside a bordered Card where the container already frames them.

Props

DescriptionDetails

PropTypeDefaultDescription
alignTextAlign"end"

Text alignment of the value. "end" right-aligns it (left in RTL).

clampLinesnumber

Number of lines to clamp to; 0 or undefined disables clamping. When the content actually overflows, a More/Less toggle is shown to expand it.

DescriptionList

PropTypeDefaultDescription
showSeparatorsboolean

Draw a divider line beneath each item except the last.

Also exports

  • componentDescriptionItem
  • componentDescriptionTerm

Composition

Builds on

Grid