HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Description ListView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA list of labels and their values, such as a details panel.StableSince 0.1.0DataUsageimport'@fusion.dev/helix/description-list'import'@fusion.dev/helix-headless/description-list'Preview
API ReferenceRoothelix-description-listA list of labels and their values, such as a details panel.
PropTypeDescriptiondirection"row"Whether each label sits over its value or beside it.dividedbooleanDefaultfalseDraws a rule between one pair and the next, in the middle of the gap, as
a details panel with many rows often does. Off by default, where space
alone separates the pairs.justify"between"Where the values sit, beside their labels.labelstringDefault""The list's name, read by screen readers, such as "Server details". It
makes the list a named group.width"auto"How wide the list is.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The items.
PartDescriptionlistThe <dl> holding the items.
CSS PropertyDescription--description-list-column-gapThe space between the column of labels and the column of values, with direction="row".--description-list-divider-colorThe color of the rule between pairs, with divided.--description-list-divider-widthThe thickness of the rule between pairs, with divided.--description-list-gapSpace between one pair and the next. The default is smaller with direction="row" than when stacked. Setting this property replaces both defaults.--description-list-label-widthThe width of the column of labels, with direction="row". Defaults to the width of the longest label; set a length such as 10rem to line up several lists.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Itemhelix-description-list-itemOne label and its value.
PropTypeDescriptionlabelstringDefault""The label, when it is plain text.severalbooleanDefaultfalseSays the values are several <dd> elements of your own, so the item
draws no <dd> of its own around them, on the server too. Without it the
item finds them once it runs, and the served markup wraps them until then.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The value, or several <dd> elements for several values.actionsControls that act on the value, such as a copy button, after it inside its <dd>.labelThe label, when it is more than text. Falls back to label.
PartDescriptionactionsThe box after the value inside its <dd>, holding the actions slot.labelThe <dt>, holding the label.valueThe <dd>, holding the value.
CSS PropertyDescription--description-list-actions-gapThe space between the value and the controls in actions.--description-list-item-alignHow a label and its value line up beside each other, as align-items. Defaults to baseline; center suits a value taller than a line, such as an avatar.--description-list-item-gapThe space between a label and its value when the label sits over it.--description-list-label-colorThe color of a label.--description-list-label-font-sizeThe size of a label's text.--description-list-label-weightThe weight of a label's text.--description-list-value-colorThe color of a value.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.severalThe values are several <dd> elements of your own, so the item draws no value part.
Roothelix-headless-description-listA list of labels and their values, such as a details panel.
PropTypeDescriptiondirection"row"Whether each label sits over its value or beside it.labelstringDefault""The list's name, read by screen readers, such as "Server details". It
makes the list a named group.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The items.
PartDescriptionlistThe <dl> holding the items.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Itemhelix-headless-description-list-itemOne label and its value.
PropTypeDescriptionlabelstringDefault""The label, when it is plain text.severalbooleanDefaultfalseSays the values are several <dd> elements of your own, so the item
draws no <dd> of its own around them, on the server too. Without it the
item finds them once it runs, and the served markup wraps them until then.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The value, or several <dd> elements for several values.actionsControls that act on the value, such as a copy button, after it inside its <dd>.labelThe label, when it is more than text. Falls back to label.
PartDescriptionactionsThe box after the value inside its <dd>, holding the actions slot.labelThe <dt>, holding the label.valueThe <dd>, holding the value.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.severalThe values are several <dd> elements of your own, so the item draws no value part.
Examples
NameDescriptionDividedA rule between pairs, with divided, for a details panel with many rows.PreviewA details panel, with the labels in one column and each value beside its label.PreviewA details panel, with the labels in one column and each value beside its label.Several ValuesA named details panel where one label has several values, each written as its own dd.StackedEach label above its value, the default layout, which fits any width.TotalsA summary as wide as its widest pair, with the figures on the end edge and lined up by their digits.With ActionsA details panel whose values each carry a copy button, in the actions slot after the value.