Detail-Liste (Begriff/Wert) — component.description-list
Detail-Ansicht eines Datensatzes als Begriff/Wert-Zeilen (dl/dt/dd) — Werte-Arten text/badge/muted/code/link, ein- oder zweispaltig, optional gestreift
Componentv1.0.0Datenweb.documentweb.applicationdesktop.shellemail.client
Beispiele
Auftrags-Detail (einspaltig, leerer Wert → —)
- Auftragsnummer
A-4711- Kunde
- Muster GmbH
- Status
- versendet
- Summe
- 1.240,00 €
- Interner Vermerk
- Rahmenvertrag Q4, Skonto geklärt
- Lieferdatum
- —
Zweispaltig mit fullWidth-Zeile
- Auftragsnummer
A-4711- Kunde
- Muster GmbH
- Status
- versendet
- Summe
- 1.240,00 €
- Interner Vermerk
- Rahmenvertrag Q4, Skonto geklärt
- Lieferdatum
- —
- Anmerkung
- Lange Beschreibung, die bei zweispaltigem Layout bewusst über die volle Breite läuft, damit sie lesbar bleibt.
Unsicherer Link → nur Text
- Probe
- Klick mich
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
items * | array | — |
columns | string: 1 | 2 | "1" |
striped | boolean | false |
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--description-list-border | var(--color-border-subtle) |
--description-list-stripe | var(--color-surface-sunken) |
--description-list-term-width | calc(var(--container-sm) * 0.35) |
Genutzte Design-Tokens
border.hairline color.border.subtle color.surface.sunken color.text.default color.text.disabled color.text.muted container.sm font.family.default font.family.mono radius.sm size.1 size.2 size.3 size.4 text.sm text.xs weight.medium