DescriptionList

Importing

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)

import { 
	DescriptionList, 
	DescriptionListTerm, 
	DescriptionListDetails 
} from '@customerio/pluma-components/react';

Usage

Use the DescriptionList component as the container, and place DescriptionListTerm components and their DescriptionListDetails components inside:

Layout

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: