sheengemologic ui
All components

DescriptionList

A native description list for related names and values.@gemologic/sheen · data-display

Playground

Symbol
BTC
Quantity
1.25
<DescriptionList layout="columns" layout="stacked"><DescriptionTerm>Symbol</DescriptionTerm><DescriptionDetails>BTC</DescriptionDetails><DescriptionTerm>Quantity</DescriptionTerm><DescriptionDetails numeric>1.25</DescriptionDetails></DescriptionList>

Variant matrix

Order details
Symbol
BTC
Quantity
1.25
layout: stacked
Symbol
BTC
Quantity
1.25
layout: columns
Symbol
BTC
Quantity
1.25

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/DescriptionList.tsx
Tokens
  • --sheen-color-fg
  • --sheen-color-fg-muted
  • --sheen-text-ui-size
  • --sheen-space-block-md
  • --sheen-space-inline-lg

Accessibility

Role: native dlKeyboard: No component-owned keys

Do

  • Compose terms and details inside DescriptionList. Use one term/details pair per row in columns layout.
  • Use stacked layout for multiple terms or descriptions in a semantic group.

Do not

  • Do not use description lists as an interactive table or arbitrary layout grid.

Generated props

NameTypeDefaultDescription
layout"stacked" | "columns"stackedStacked labels and values, or columns using one term followed by one details element per pair.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.