A description list consists of three components:
DescriptionList - wraps the description list (a dl tag)DescriptionListTerm - the term (a dt tag)DescriptionListDetails - the details (a dd tag)The components can be imported via:
Use the DescriptionList component as the container, and place DescriptionListTerm components and their DescriptionListDetails components inside:
The list can also be rendered in a horizontal layout by setting the layout prop to "horizontal":
Additionally, the terms can be right aligned (only in the horizontal layout), with
the termAlignment prop:
PlumaDescriptionList extends TextThe text color. (See text color tokens)
The font family. (See font family tokens)
The font style. (See MDN font-style)
Default:'vertical'
Whether the description list should render in a vertical or horizontal layout.
The text size. (See font size tokens)
Default:'vertical'
Whether the terms (titles) should be left or right aligned when in a horizontal layout.
A predefined typography style. (See text tokens)
PlumaDescriptionListTerm extends TextThe text color. (See text color tokens)
The font family. (See font family tokens)
The font style. (See MDN font-style)
The text size. (See font size tokens)
A predefined typography style. (See text tokens)
PlumaDescriptionListDetails extends TextThe text color. (See text color tokens)
The font family. (See font family tokens)
The font style. (See MDN font-style)
The text size. (See font size tokens)
A predefined typography style. (See text tokens)