Detail-Liste (Begriff/Wert) — UI-Kit-Galerie

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	Builder-Label
items *	array	—	Einträge
columns	string: 1 \| 2	"1"	Spalten (2 = ab Tablet nebeneinander)
striped	boolean	false	Gestreift

* Pflicht-Prop

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

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.hairlinecolor.border.subtlecolor.surface.sunkencolor.text.defaultcolor.text.disabledcolor.text.mutedcontainer.smfont.family.defaultfont.family.monoradius.smsize.1size.2size.3size.4text.smtext.xsweight.medium

LLM-Notizen

component.description-list

Detail-Ansicht eines Datensatzes als Begriff/Wert-Zeilen (echtes <dl>): DIE Komponente für Stammdaten-/Auftrags-Details. Werte-Arten = fester Vorrat wie Tabellen-Zellen: text, badge (+tone), muted, code, link (+href, safe_href). Leerer Wert → „—".

Wichtige Props

items = [{label, value, type?, tone?, href?, fullWidth?}] (Pflicht).
columns: "2" = ab Tablet zweispaltig (Begriff über Wert); fullWidth-Einträge laufen über beide Spalten. striped.
Stellschrauben: --description-list-border, --description-list-stripe, --description-list-term-width.

Beispiel-Node


{
  "definition": "component.description-list",
  "props": {
    "items": [
      {"label": "Auftragsnummer", "value": "A-4711", "type": "code"},
      {"label": "Status", "value": "versendet", "type": "badge", "tone": "info"}
    ],
    "columns": "2"
  }
}