Description List
The Description List component displays term-definition pairs, useful for glossaries, metadata, or key-value displays.
Installation
yarn add @twilio-paste/description-list
import {
DescriptionList,
DescriptionListSet,
DescriptionListTerm,
DescriptionListDetails,
} from '@twilio-paste/description-list';
<DescriptionList>
<DescriptionListSet>
<DescriptionListTerm>Name</DescriptionListTerm>
<DescriptionListDetails>John Doe</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Email</DescriptionListTerm>
<DescriptionListDetails>[email protected]</DescriptionListDetails>
</DescriptionListSet>
<DescriptionListSet>
<DescriptionListTerm>Phone</DescriptionListTerm>
<DescriptionListDetails>+1 234 567 8900</DescriptionListDetails>
<DescriptionListDetails>+1 234 567 8901</DescriptionListDetails>
</DescriptionListSet>
</DescriptionList>
DescriptionList
element
string
default:"DESCRIPTION_LIST"
Overrides the default element name to apply unique styles with the Customization Provider.
DescriptionListSet
element
string
default:"DESCRIPTION_LIST_SET"
Overrides the default element name to apply unique styles with the Customization Provider.
DescriptionListTerm
element
string
default:"DESCRIPTION_LIST_TERM"
Overrides the default element name to apply unique styles with the Customization Provider.
DescriptionListDetails
element
string
default:"DESCRIPTION_LIST_DETAILS"
Overrides the default element name to apply unique styles with the Customization Provider.
Features
- Semantic HTML using
<dl>, <dt>, and <dd> elements
- Automatic spacing between sets and items
- Support for multiple details per term
- Consistent typography and styling
